This section will detail the CX Create's text editor and give examples of the formatting options available when building a script.

Editor layout
Bold
Italics
Headings
Unordered lists
Ordered lists
Text Color
Background Color
Dynamic
html
Images
Tables
Combining Formats

CX Create 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 CX Create. 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

If the field does not have any default prompt text assigned to it, the editor will appear blank when first accessed.

*This text editor from a newly-added Address field is empty by default.

All fields display the same options:

If the field has default prompt text, it will appear in the text area.

*This is the text editor from a newly-added Text input field. Note the word count at the bottom of the editor.

The text editor contains a word/character counter at the bottom which shows the following:

Number of lines currently in the editor
Number of words currently in the editor
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, 15 words total, and 29 characters in the current line, which is 2 (lines in the editor are numbered starting at 0).

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.
Highlighting the text and pressing [CTRL+B] on your keyboard.
Manually typing the double asterisks (with no extra spaces) before and after your text.

An example of bold formatting in the preview pane:

*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.

*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.

As you begin typing, the text will appear italicized.

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.
Highlighting the text and pressing [CTRL+I] on your keyboard.
Manually typing the asterisks (with no extra spaces) before and after your text.

An example of italics in the preview pane:

*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 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 button is clicked.

Heading 5 is the same size as regular (unformatted) text.

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.
Highlighting the text and pressing [CTRL+H] on your keyboard 1-6 times.
*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) (with no extra spaces) before the line of text you wish to adjust.

5. Unordered Lists

To create an unordered, 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.

*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.

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 Unordered List button will return you to regular text.

A bulleted list can also be ended by pressing [Enter] two times to break (stop) the formatting. This will resume regular text but will create an extra space in between your list and text.

Alternatively, you can type the complete list first, and add the bullets by highlighting the block of text:

Then clicking the Unordered List button:

An example of an unordered list in the preview pane:

6. Ordered 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 next number in the list will appear.
Once your numbered list is complete, pressing [Enter] one more time, then clicking the Ordered List button will return you to regular text.

A numbered list can also be ended by pressing [Enter] two times to break (stop) the formatting. This will resume regular text but will create an extra space in between your list and text.

Alternatively, you can type the complete list first, and add the numbers by highlighting the block of text:

Then clicking the Ordered List button:

*When an ordered list is created this way, the editor will show all listed items with the number 1. This is standard formatting, and will display sequentially in the preview pane and at runtime.

An example of an ordered list in the text editor:

And the same list in the preview pane:

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.

*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 in the preview pane:

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.

*Light colored backgrounds complement darker text and vice versa.

An example of text with colored background in the preview pane:

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 CX Create to add basic formatting options to text. 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 the same text in the 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

CX Create does not currently support image uploads directly, but adding images to your slides can be done using html tags.*
*Image must be hosted on a 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://ctrlq.org/images/
https://postimage.io/
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:

	height	width	weight
Widget A	1.5"	2"	15oz
Widget B	3.75"	3.25"	2lbs

The above table would be added into the script by typing the following into a field's prompt:

<table>
<tr>
<th></th>
<th>height</th>
<th>width</th>
<th>weight</th>
</tr>
<tr>
<td>Widget A</td>
<td>1.5"</td>
<td>2"</td>
<td>15oz</td>
</tr>
<tr>
<td>Widget B</td>
<td>3.75"</td>
<td>3.25"</td>
<td>2lbs</td>
</tr>
</table>

The outcome will look like this:

*Text inside the header rows <th></th> will appear in bold

To add spacing, amend the first line to read:
<table style="width:50%">

To add a border to your table, add the word border to the first line:
<table style="width:50%" border>

13. Combining Formats

CX Create'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 in the editor
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

This is how the text appears in the preview pane: