“”

Formatting in the Experience Builder

Whether you're chatting with your visitors in live chat or styling your experiences, Qualified offers a few sweet styles that you can use to format your text and add personality to your conversations. In this guide, we'll go over the styles that are available to you within Qualified.

Bold

This is my **very important** text.

This is my very important text.

Using bold text in an experience.

Italics

I *really* need to have my text italicized.

I really need to have my text italicized.

Using italics in a live chat.

Bold Italics

This text is ***really important***.

This text is really important.

Using bold & italics in a live chat.

Centering Headers

# This symbol before my text centers my header
Centering message before interaction with Qualified app.

You'll want to note that this option only works for those messages that appear before your Qualified messenger is opened.

Line Break

To create a line break, just hold down the 'shift' key and press 'enter' while in your live chat window or experience.

Hyperlinks

Qualified will automatically link any URL used within the messages of your Experiences. For example, if you were to copy and paste a link to https://www.qualified.com it would look something like this: https://www.qualified.com

However, sometimes, the links you would like to include in your Experience have more complicated URL strings. The problem is that these longer, more complicated looking URLs are sometimes ugly and distracting. To solve for this, we use basic Markdown syntax and create a hyperlink.

The format for hyperlinks includes two parts: the readable text to show in the live chat messenger, and then the URL itself. The readable text must be surrounded with brackets, followed by the URL which is surrounded by parentheses, as follows:

[readable_text](https://www.company.com)

Here is an example of creating a hyperlink with Markdown syntax:

[What is Conversational Marketing](https://www.qualified.com/blog/what-is-conversational-marketing)

Placing a hyperlink formatted with Markdown syntax into the text of an Experience will format the hyperlink with the link location hidden behind the text you've chosen: What is Conversational Marketing?

Emojis

Add emojis to your experience or live chat by placing your cursor where you'd like to enter an emoji. Next, hold down the control + command + space bar keys on a mac or on a Windows machine press Win+. or Win+; on your keyboard. In other words, hold the Windows key down and press either the period (.) or semicolon (;) key.

Once the emoji keyboard appears, select the emoji you'd like to add to your text to add it.

Inserting an emoji into an experience.

Gifs & Images

Everyone loves a good animated GIF, and www.giphy.com is the source for thousands of great animated GIFs that you can include in any of your messages. All you need to do is to find a Giphy link that matched the format show below, and paste the link into your messenger, shortcut, or bot experience.

https://media.giphy.com/media/[GIPHY_ID]/giphy.gif

Or, add in your own personalized gif to customize your greeting like the one shown below:

Using Markdown for Sending Images

In addition to hyperlinks, you can use markdown syntax for sending images in the messenger.

The widest an image will be displayed is 268px so be sure to keep this in mind when selecting images to use in your Qualified experiences.

The format includes 3 parts: (a) an exclamation point, (b) some alt text surrounded by brackets, (c) the URL to the image surrounded by parentheses, as follows:

![image alt text](https://www.company.com/image.png)

So an example image would look like this

![Thank You from Qualified](https://image.cnbcfm.com/api/v1/image/105958571-1560187546348trailhead-crew.jpg)

Placing an image using markdown will appear in the messenger, as shown below:

Using Markdown for Sending Clickable Images

In addition to sending images, you can use markdown syntax for sending clickable images in the messenger. Clickable images are great if you're sending something that you want the visitor to expand, such as an infographic. The format includes a combination of the link format and the image formats above, and looks like this

[![alt text](link_to_image.png)](hyperlink_to_your_destination.html)

Next Steps

Request a live demo

See Qualified in action on your website. Request a live demo and one of our reps will contact you immediately, or talk to us right now.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Free custom demo
Live on your site