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.


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


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.


You can see now the change in the content.


You also have the following features:
Feature | Options |
Amazon effect | Name: Whispered |
Break | Strength: None, Extra Weak, Weak, Medium, Strong, Extra Strong; Time: in seconds |
Language | English US, English Other Countries, German, Spanish, Italian, Japanese, French |
Prosody | Rate: 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 As | Interpret 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 |
Sub | Alias: change to any value you need |
Voice | English, 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 !!!
Leave a Reply