SSML Enabled TinyMCE Rich Text Editor Field for Optimizely/Episerver CMS

SSML Enabled TinyMCE Rich Text Editor Field for Optimizely/Episerver CMS

In this blog post we will show you how to use a plugin developed by Verndale which will allow you to have a RTF editor compatible with SSML which will be able to generate content that can be used by Alexa and Google assistants adding things like accents, breaks, alias and more inside Episerver/Optimizely CMS. So without further due, lets begin.

We first have to install the package using the nuget package console or the nuget package interface. The package to install is Verndale.SSMLEditor.

If you are using the nuget package console use the following command:

Install-Package Verndale.SSMLEditor -Version 1.0.0.5

The package will install a SSMLEditorBlock which you can use to generate SSML content inside an RTF editor or add is as a local block inside an existing page model. Now, to create a block you must first setup a project flow name. So go to the admin section, tools, SSML admin option and press the add entry button.

Then add a new project flow name and save it.

You will see the project flow names added to your site after saving.

Now to create the block just go to the Episerver/Optimizely CMS editor interface and create a new block.

Choose the flow you want and the name of the block and create it.

As soon as the block is created you can start adding content inside the RTF field. You can use any of the SSML featured options like emphasis, the first icon next to the code button.

To use that feature, you can mark the text to emphasis, then click in the button of the feature and choose what level of emphasis you want to apply: strong, moderate or reduced.

Then press the ok button

You can see now the change in the content.

And if you see the code, you can see the SSML markup already there.

You also have the following features:

FeatureOptions
Amazon effectName: Whispered
BreakStrength: None, Extra Weak, Weak, Medium, Strong, Extra Strong;
Time: in seconds
LanguageEnglish US, English Other Countries, German, Spanish, Italian, Japanese, French
ProsodyRate: None, Extra Slow, Slow, Medium, Fast, Extra Fast;
Pitch: None, Extra Low, Low, Medium, High, Extra High;
Volume: None, Silent, Extra Soft, Soft, Medium, Loud, Extra Loud
Say AsInterpret As: Spell Out, Cardinal, Ordinal, Digits, Fraction, Unit, Date, Time, Telephone, Address, Interjection, Expletive;
Format for Date: None, Month-Day-Year, Day-Month-Year, Year-Month-Day, Month-Day, Day-Month, Year-Month, Month-Year, Day, Month, Year
SubAlias: change to any value you need
VoiceEnglish, American (several versions), English British (several versions), German (several versions), Spanish (several versions), Italian (several versions), Japanese (several versions), French (several versions)

And that is it, You can now have an SSML editor which allows you to generate content that can be used by Alexa and Google assistants. If you have any question let me know. I hope it will help someone and as always keep learning !!!

Written by:

Jorge Cardenas

Developer with several years of experience who is passionate about technology and how to solve problems through it.

View All Posts

Leave a Reply