The content in this article is appropriate for: Administrators and Supervisors
This section will detail the SC WorkFlow's text editor and give examples of the formatting options available when building a Guided Interaction.
- Editor layout
- Bold
- Italics
- Headings
- Underline
- Generic lists
- Numbered lists
- Text Color
- Background Color
- Dynamic
- HTML
- Images
- Tables
- Combining Formats
SC WorkFlow uses Markdown, a type of plain text formatting.
The text editor for a specific field can be accessed by clicking on the field in the right-hand preview pane inside SC WorkFlow. You can use this area to modify default prompt text or to add custom text to a field that does not have a default prompt.
*The text editor for the chosen field's prompt text appears on the left.
The character limit within the text editor is currently not capped.
💡Need to add a large amount of text? Consider using a Paragraph field, which can be set as togglable. This way, the agent can expand/collapse it as needed.
1. Editor Layout
Fields do not have any default Prompt text assigned, so the editor will appear blank when first accessed.
*The words "Enter text..." are only for reference and are not shown at runtime. If this prompt is not edited, nothing will be shown.
All fields display the same options:
The text editor contains a word/character counter at the bottom which shows the following:
- Number of lines currently in the editor (a new line is counted each time <return> is pressed)
- Number of words currently in the editor (a new word is triggered by a <space>, not by a set amount of characters)
- Number of characters in the current line
*This text editor shows how the word/character counter will adjust as you add or remove text.
There are currently 3 lines of text, 16 words total, and 30 characters in the current line, which is 2 (lines in the editor are numbered starting at 0).
The total number of characters in the prompt are not counted.
2. Bold
To create text with a bolded font style, place your cursor in the text area and click this button.
The editor will place the cursor between two sets of 2 asterisks.
As you begin typing, the text will appear in bold.
*Notice that the asterisks DO NOT appear in the right-hand preview pane. This is because the editor views them as Markdown formatting. Once you apply formatting to a block of text, it is advised that you view it in the preview pane to ensure it is appearing as intended.
Clicking anywhere else inside the editor will move the cursor to the outside of the bold text.
Once the cursor is moved to the outside of the asterisks, anything that is typed will appear unformatted.
A block of text can also be bolded by:
- Typing the text first, then clicking and dragging your mouse to highlight the selection, and pressing the Bold button.
- Manually typing the double asterisks (with no extra spaces) before and after your text.
An example of bold formatting at runtime:
*Bold formatting has been applied to two words in the above Name field's prompt text.
3. Italics
To create text with an italicized font style, place your cursor in the text area and click this button.
The editor will place the cursor between two asterisks.
As you begin typing, the text will appear italicized.
*Notice that the asterisks DO NOT appear in the right-hand preview pane. This is because the editor views them as Markdown formatting. Once you apply formatting to a block of text, it is advised that you view it in the preview pane to ensure it is appearing as intended.
Clicking anywhere else inside the editor will move the cursor to the outside of the italicized text.
Once the cursor is moved to the outside of the asterisks, anything that is typed will appear unformatted.
A block of text can also be italicized by:
- Typing the text first, then clicking and dragging your mouse to highlight the selection, and pressing the Italics button.
- Manually typing the asterisks (with no extra spaces) before and after your text.
An example of italicized font at runtime:
*Two words in the above Name field's prompt text have been italicized
4. Headings
To create header text, place your cursor in the text area and click this button.
🤔 Need to change the font size? This is how you do it!
The editor will place the cursor after a single number sign.
As you begin typing, the text will appear as a heading.
There are six heading sizes available, ranging from 1 (largest) to 6 (smallest).
The heading size is determined by the number of times the "H" button is clicked.
Heading 5 is the same size as regular (unformatted) text.
In the Prompt, Heading 6 will appear to be the same size as regular(unformatted) text, but in the preview and in runtime, it will actually appear smaller:
*Notice that the number signs DO NOT appear in the right-hand preview pane. This is because the editor views them as Markdown formatting. Once you apply formatting to a block of text, it is advised that you view it in the preview pane to ensure it is appearing as intended.
Text can also be made into a heading by:
- Typing the text first, then placing your cursor at the beginning of the line and pressing the Heading button 1-6 times depending on the desired size.
*Heading size applies to an entire line of text. If there is other text on the same line, it will also be included as part of the heading. - Manually typing the number sign(s), followed by a single space, then the desired Heading text.
5. Underline
To create text with an underlined font style, place your cursor in the text area and click this button.
The editor will create placeholder text between two sets of ^^.
You must highlight and delete, or highlight and type over the "placeholder" text. Anything you type between the ^^characters will appear underlined.
*Notice that the special characters DO NOT appear in the right-hand preview pane. This is because the editor views them as Markdown formatting. Once you apply formatting to a block of text, it is advised that you view it in the preview pane to ensure it is appearing as intended.
Clicking anywhere else inside the editor will move the cursor to the outside of the underlined text.
Once the cursor is moved to the outside of the special characters, anything that is typed will appear unformatted.
A block of text can also be underlined by:
- Typing the text first, then clicking and dragging your mouse to highlight the selection, and pressing the Underline button.
- Manually typing the double ^^ (with no extra spaces) before and after your text.
An example of underlined text at runtime:
*Underline formatting has been applied to two words in the above Name field's prompt text.
6. Generic Lists
To create a generic, or bulleted list, place your cursor in the text area and click this button.
The editor will place the cursor after a single asterisk and a space.
As you begin typing, the text appears next to the first bullet.
Every time you type more text and hit [Enter] on your keyboard, the next bullet in the list will appear.
Once your bulleted list is complete, pressing [Enter] one more time, then clicking the Generic List button will return you to regular text.
*Notice that the right-hand preview pane displays a bullet instead of an asterisk. This is because the editor has processed it as Markdown formatting. Once you apply formatting to a block of text, it is advised that you view it in the preview pane to ensure it is appearing as intended.
You can type the complete list first, and add the bullets all at once by highlighting the block of text:
Then clicking the Generic List button:
An example of a generic list at runtime:
You can add bullets at the beginning of a new line by manually typing an asterisk followed by a single space and then your text.
Creating a generic list with nested bullets:
You can also create a generic list that contains bullets and up to 2 additional levels of sub-bullets.
The easiest way to do this is as follows:
- Follow the instructions above to create a regular, generic list with all items at the same level
- Place your cursor behind (to the left of) the asterisk of a bullet you would like to indent and press the <tab> key on your keyboard one time
- To create another sub-bullet, place your cursor behind (to the left of) the asterisk and press <tab> on your keyboard two times
You can create a bulleted list as you type, but be advised that pressing <enter> from any bulleted line will only move your cursor one line lower from the above bullet. To return to the left margin of the prompt area, you must backspace 4 (or 8) times.
6. Numbered Lists
To create an ordered, or numbered list, place your cursor in the text area and click this button.
The editor will place the cursor after the number 1.
As you begin typing, the text appears next to the first number.
Every time you type more text and hit [Enter] on your keyboard, the cursor will move to the next line. To create another entry in your ordered list, you must click the button at the beginning of each new line.
*Notice that every entry in your ordered list has the same number. If all items are added sequentially, the list will appear numbered correctly in the preview pane. Once you apply formatting to a block of text, it is advised that you view it in the preview pane to ensure it is appearing as intended.
Alternatively, you can type the complete list first, and add the numbers by highlighting the block of text:
Then clicking the Numbered List button:
An example of a numbered list at runtime:
7. Text Color
To create colored text, highlight the text by clicking and dragging your mouse and click this button.
Choose one of the available colors by clicking on it:
*This is the same color palette that is available for background color.
The editor will close the color selection and place the newly colored text between the Markdown formatting and the Hex code for the color you selected.
*Notice that once you apply formatting, the color changes in the Prompt and in the preview pane, where it will appear without the markup. Once you apply color to text, it is advised that you view it in the preview pane to ensure it is appearing as intended.
⚠️*Remember that text will always appear on a white background by default. Lighter text colors will be more difficult to read, so if white or light text is required, it is recommended that you change the background color first, and then modify the text color for the entire block of text. For more tips on combining format types, scroll down to Combining Formats.
An example of colored text at runtime:
8. Background Color
To create a colored background for your text, highlight the text by clicking and dragging your mouse and click this button.
*This option only sets a colored background for the text you choose, it will not set a background color for the entire slide.
Choose one of the available colors by clicking on it:
*This is the same color palette that is available for text color.
The editor will close the color selection and place the newly colored background over the text, between the Markdown formatting and the Hex code for the color you selected.
*Notice that once you apply formatting, the background color changes in the Prompt and in the preview pane, where it will appear without the markup. Once you apply color, it is advised that you view it in the preview pane to ensure it is appearing as intended.
💡Light-colored backgrounds complement darker text and vice versa.
An example of text with colored background at runtime:
9. Dynamic
This button is used to add Dynamic and/or Conditional text to your script.
These options are functional rather than cosmetic and are covered in depth in their respective articles: Dynamic Text and Conditional Text.
10. HTML
Markdown is a simple and easy way for SC WorkFlow to add basic formatting options to text. However, it does not offer the same level of customization as HTML.
If you are already familiar with HTML and want to use HTML tags in your script, they can be copied and pasted into the text area of the editor, with some exceptions.
Because Markdown uses punctuation characters (*,#) it will recognize those as such if they are included in the material you are pasting. It will also count all lines as valid, and display them in the preview and at runtime, even if those lines contain only tags and no visible text.
An example of HTML in the text editor and preview pane:
*Note the empty spaces that will be caused by placing tags on their own lines.
⚠️Excessive use of HTML can crowd the text area and become difficult to read. Copy and paste with caution!
11. Images
SC WorkFlow does not currently support image uploads directly, but adding images to your slides can be done using HTML tags.*
*Image must be hosted on an https:// connection
The tag used is <img>. This creates a holding spot for the image that is linked.
You must include both src and alt attributes in your HTML.
For example:
<img src="https://openclipart.org/download/3127/azieser-Smiley-Yellow-and-Black.svg" alt=smiley face>
When pasted into the Text Editor, it will display the hosted image at its original size:
In this example, the hosted image is too large.
To resize an image, add the width and height to the alt attribute:
<img src="https://openclipart.org/download/3127/azieser-Smiley-Yellow-and-Black.svg" alt=smiley face width="257" height="329">
Images can be placed alone or alongside text within the Prompt of any field.
⚠️ If you have an image file that is not hosted:
You can upload it to any free image hosting site that will create the https: address that is needed.
https://postimage.org
https://lensdump.com/
http://cubeupload.com/
*Using any of the above third party sites binds you to their terms and conditions.
12. Tables
As with images, tables are not able to be added directly to a script using the Text Editor, but simple table formatting using HTML will be supported.
The tag used to define this is <table>. Other tags that may be used include:
<tr> table row
<th> table header
<td> table data cell
For example:
The above table would be added into the script by typing the following into a field's prompt:
<table>
<tr>
<table style="width:50%" border>
<th>Item</th>
<th>Price</th>
<th>Free Ship? Y/N</th>
</tr>
<tr>
<td>Widget A</td>
<td>$100</td>
<td>Y</td>
</tr>
<tr>
<td>Widget B</td>
<td>$25</td>
<td>N</td>
</tr>
</table>
*Text inside the header rows <th></th> will appear in bold
13. Combining Formats
SC WorkFlow's text editor makes it possible to combine, or layer, multiple types of formatting on the same block of text.
Markdown syntax reads from left to right, so it will first consider the formatting character that appears before the word.
For formatting characters that apply to an entire line, like the number sign(s) for headings, those should be applied first.
If there is formatting that wraps the text (such as the single asterisks for italics and the double asterisks for bold), that should be applied next, and only to the text itself—leaving out any indicator for line formatting.
Any custom coloring, whether to the text or text background should be applied last, and only to the text itself.
For example- To create a heading that is yellow italicized font on a black background, you would do the following:
- Type the text into the prompt
- Highlight the block of text
- Click the heading button to apply the desired heading size
- Highlight only the text, leaving out the heading format characters
- Click the Italics button
*Font remains highlighted. If not, highlight again. - Click the Text Color button and choose yellow
- Highlight only the text, leaving out the color formatting
*Highlighting the text will also make it easier to read. - Click the Background Color button and choose black
- Check the text in the preview pane to ensure it appears the way you intended.
Comments
0 comments
Article is closed for comments.