Support Center

Rich Text Editor

Last Updated: Aug 14, 2017 11:53AM PDT

Build

Rich Text Editor

The Rich Text Editor allows you to design the text inside a balloon or ShoutOut. Add emphasis, personalization, color customization, images, videos, hyperlinks, and more!


 
The material in this article applies to both Smart Walk-Thrus and Walk-Thrus.

Article Contents



The Short Version

After creating a Smart Walk-Thru or ShoutOut, return to the Options Menu to make desired changes to appearance and behavior of that individual item. Click on the item (Step or ShoutOut) to edit it and the Rich Text Editor is found in the Interaction tab of the Smart Walk-Thru Step and ShoutOut Options Menus.

Some examples of what the Rich Text Editor can be used for include: 
  • Add a promotional Video to a ShoutOut to promote a new product
  • Design a balloon as an error message
  • Welcome a returning user to your site by name
  • Give users optionality to start other Smart Walk-Thrus directly in text on the balloon
  • Edit Advanced Templates from the Design Gallery
 
Tip: To make universal changes to text color, font, and design in balloons, open the Customize Balloon tab from the Admin Bar.


 How It Works

The Rich Text Editor makes it easy to apply BBCode to change things like font size, color, style and add hyperlinks, video, images or dynamic text. Using the tools in the RTE will apply this BBCode. You can also enter Source view to write in BBCode on your own or open the CSS console for more editing options. .
 
Tip: Read about using CSS to modify balloons! Want to further modify the look and feel of the CSS? Contact your CSM and ask about the CSS Generator.
 
 Rich Text Editor Layout
The Rich Text Editor is divided into 4 sections:

1. The balloon title and description fields on the left
2. The balloon preview on the right
  • There are two modes for previewing the balloon:
    • Visual - This is default option. Will visualize any BBCode text in the balloon. Custom CSS is taken into consideration.
    • Source - Use this option in order to see what is going on behind the scenes
3. The Rich Text Editor customization features at the top
4. CSS Customization console. Edit advanced templates and make then your own! Select an element in the Preview to find the relevant line in the CS

 
 Customization Options
Balloon Customization Options
Below is a list of customization options:

Font:
To use the font customization formats, highlight desired text and click the associated icon.
  • Bold
  • Italic
  • Underline
  • Font Color
  • Font Size
  • Text Alignment

Insert:
  • Dynamic Text
  • Smart Walk-Thru
    • Creates a link that launches another Smart Walk-Thru. This link will stop the current Smart Walk-Thru and launch the linked one. In order to link a Smart Walk-Thru, it must have already been created and have a Walk-Thru ID.
  • Image
    • Enter image URL. Images that WalkMe uses for customers are stored in Amazon S3 servers. Enter Width and Height if needed.
  • Link
    • Enter URL
  • Video
    • Enter video URL into the corresponding video platform. Videos can be played from any platform as long as they are in MP4 format using an iFrame (see BBCode in table below). Enter Width and Height if needed.
  • iFrame
     
 BBCode
The buttons in the Rich Text Editor make it easy for you to format text. When you highlight text, WalkMe applies the BBCode to the text. If you would like to view the BBCode inserted using the Rich Text Editor, check out Source view.

If you would like to add BBCode yourself instead of using the WalkMe features, you can find examples of BBCode below in the table below.
Feature BBCode
Bold text [b]text[/b]
Italic text [i]text[/i]
Underline text [u]text[/u]
Font color [color=#hex_color]text[/color]
Font size [size=size_in_px]text[/size]
Insert image [img]img_URL[/img]
width and height: [img=widthxheight]img_URL[/img]
Insert link open in current tab: [url=URL_address target="_self"]text[/url]
open in new tab: [url=URL_address target="_blank"]text[/url]
Insert video [youtube]youtube_video_id[/youtube]
with width and height: [youtube width="width", height="height"]youtube_video_id[/youtube]
or [iframe]www.url.com[/iframe]
Align Text Left [div style="text-align:left"]text[/div]
Align Text Center [div style="text-align:center"]text[/div]

Following are examples of BBCode that can be used in Source view but do not have an icon for automatic generation.
Feature BBCode
Align Text in the center [div style="text-align:center"]text[/div]
Strike through [s]text[/s]
Tables [table]{rows}[/table]
Table rows [tr]{cells}[/tr]
Table content cells Heading cell: [th]{content}[/th]
Content cell: [td]{content}[/td]
Link to email [url=mailto:name@company.com]name@company.com[/url]

CSS
From the Rich Text Editor you will be able to make local changes to the Balloon or ShoutOut. All CSS entered on the local level gets transferred to the Global CSS tab and can be visible from there as well. Local CSS will override any CSS that is on the global level. Read more about the Design Gallery.



Try it Out

Identify a ShoutOut or step balloon on your implementation to customize. Try adding font style, dynamic text, linking to a Smart Walk-Thru, and adding an image or video.
 

Related Resources

Contact Us

  • Email Us
  • FAQ
  • Call Us

    Toll Free (US Number) 1-855-4-WalkMe (1-855-492-5563)
http://assets1.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete