This feature available on All Plans
Overview
The Rich Text Widget allows you to add and style text in your campaign. You can use the text editor within the widget for basic formatting or the Style Panel for more detailed customizations.
Adding the Rich Text Widget
To add the Rich Text Widget to your campaign:
- Click the Rich Text Widget icon in the Add Widgets Panel, or
- Drag the icon into your preview area.
Widget Settings
The widget settings popup allows you to make changes to your Rich Text Widget.
Renaming the Widget
- Click the pencil icon in the top-left corner (next to the widget name).
- Type the new name and press Enter.
CSS ID
- The widget's CSS ID (starting with a
#
) is displayed in the top-right corner of the popup.
Customization
- Navigate through the left-side menu to access and adjust settings. Use the Back and Next buttons to move through sections.
When finished, click the blue Save and Exit button to save your changes.
Setup (The Text Editor)
The text editor allows you to type, paste, and style text. If you've used word processing programs like Word or Google Docs, the interface will feel familiar.
Text Editor Buttons Overview
Here’s a breakdown of the editor's buttons and their functions:
Undo - Undoes the last character you typed or styling you applied.
Redo - Redoes the last undo you performed.
Cut - Takes the currently highlighted text and cuts it out of the text box (any cut text is temporarily copied to your clipboard).
Copy - Takes the currently highlighted text and copies it to your clipboard.
Paste - Pastes whatever is currently on your clipboard to your text box (at the position of the cursor).
Paste as text - Pastes any text on your clipboard to your text box without any additional formatting (at the position of the cursor). It is the default setting. If you copy text into the widget, make sure to unselect this option to keep formatting.
Insert/edit image - Allows you to add an image into the text box.
Insert/edit link - Use this to add a hyperlink to the currently highlighted text.
Remove link - Removes any hyperlinks from the currently highlighted text.
Subscript - Formats the highlighted text to be smaller and sit slightly below the baseline.
Superscript - Formats the highlighted text to be smaller and sit above the line of text.
Horizontal line - Adds a thin horizontal line across the entirety of your text box.
Nonbreaking space - Adds a space character that prevents an automatic line break at its position.
Special character - Pulls up a character map so you can add a special character without needing to know the Alt/Option keyboard combination.
Left to right - Sets your text box so that when text is typed in, it reads from left to right.
Right to left - Sets your text box so that when text is typed in, it reads from right to left.
Source code - Opens a window that displays the source code of what appears in your text box; you can edit this code to add custom HTML for formatting if you'd like.
Fullscreen - Expands the text editor to fill your entire screen.
Text size select - This dropdown allows you to add size formatting to your highlighted text; you can choose from Paragraph and Header 1-4.
Bullet list - This will format the selected text as a bulleted list; using the dropdown gives you the options to use default bullets, circles, discs or squares.
Numbered list - This will format the selected text as a numbered/lettered list; using the dropdown gives you the options to use the default numbers (English); lowercase Alpha, Greek, and Roman letters; and uppercase Alpha and Roman letters.
Blockquote - Using this formats the highlighted text as a blockquote, indenting it from the rest of your text.
Bold - This will format your highlighted text in bold, to provide emphasis.
Italic - This will format your highlighted text as italic, to provide emphasis.
Clear formatting - This will clear any formatting/styling from your selected text.
Text Color* - Opens a window that allows you to select the color of your selected text.
Highlight Color* - Opens a window that allows you to select the color that appears behind your selected text as a highlight (not the color of the widget background - just the color that appears behind the text itself).
Underline* - Places a line under your currently selected text, to provide emphasis.
Decrease indent* - If you're currently indenting your text, clicking this once will remove one unit of indentation.
Increase indent* - This will add one unit of indentation to your currently selected text.
Remove Inline Styles - If you are using formatting that will override text styling settings set up in the Style Panel, this text will appear in red. Click this button to remove all inline styles from your text.
* - Styling methods that will cause the Remove Inline Styles button to activate.
Library
The Library section allows you to manage text snippets:
- View public snippets or switch to Private to access your saved snippets.
- To add a snippet to your widget, select it and click Append.
- To delete a snippet, select it and click the trashcan icon.
Adding a New Snippet
- Go to the Setup section and type your text into the editor.
- Add a name in the Give it a name... field.
- Click Save to Library.
Visibility
Control when and where the widget appears using the Visibility section.
Options include:
- Setting specific dates and times for visibility.
- Displaying the widget only in the Builder.
- Limiting visibility to certain countries.
For more details, view the Widget Visibility help doc.
Extras
Learn about the Main Tag, CSS Classes, and Smart Labels settings here.
Using Text from Outside ShortStack
Copying and pasting text from external sources (e.g., emails, documents) can override your Rich Text Widget settings. To maintain styling:
Clearing Formatting Options:
-
Using Keystrokes:
- Mac: Press Shift + Option + Command + V to paste without formatting.
- Windows: Press Control + Shift + V to paste without formatting.
-
Using the Clear Formatting Button:
- Highlight the pasted text and click the Clear Formatting button in the editor.
-
Using the Remove Inline Styles Button:
- If inline styles are detected, the Remove Inline Styles button will appear red. Click it to clear all styles.
Note: The Clear Formatting button is better for removing styles from specific text chunks, while the Remove Inline Styles button removes all formatting.