Hyperlinks in Live Chat & Experiences

Hyperlinks  are a quick way for you to link website visitors off to relevant content and pages on your site, or customize chat messages with images and animated GIFs! In this guide, you'll learn the options and the syntax for using hyperlinks in live chat, chat bot experiences, and shortcuts. We'll cover the following:

  • Using links in live chat, shortcuts and bots
  • The basics, copying and pasting links
  • Using markdown for hyperlinks
  • Using markdown for sending images
  • Using markdown for sending clickable images
  • Can I send animated GIFs?

Using Hyperlinks in Live Chat, Shortcuts & Bots

When you have Qualified set up on your site, there are a few ways to send messages to a website visitor. These include typing (or copying and pasting) into the live chat messenger console, selecting a shortcut using a slash command, or having a bot automatically send a message as defined in an experience.

All of these mechanisms to send message use the same underlying system to process and send messages. Therefore, using hyperlinks in all of these areas of the Qualified application will result in the same experience for the website visitor. All links will open a new tab in the browser of the website visitor.

The Basics: Copying and Pasting Links

The most common way most of us send links is via copying and pasting the link itself. 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, links on corporate websites have more complicated (and some might say, less beautiful) URL strings. For example, here is a hyperlink to one of our popular blog posts:

https://www.qualified.com/blog/what-is-conversational-marketing

Now, if you just copy and pasted that link into the messenger, a shortcut, or a bot experience on your site, the link would show up exactly as you have pasted it.

Not ideal, right? The problem is that these longer, more complicated looking URLs are sometimes ugly and distracting. What if there were a way for a link that looked like this: https://www.qualified.com/blog/what-is-conversational-marketing to look more like this: Read our latest blog post

Using Markdown Syntax for Hyperlinks

You can now send a hyperlink in Qualified using basic Markdown syntax. Markdown syntax was developed by John Gruber and released in 2004. Its key design goal is readability – that the language be readable as-is, without looking like it has been marked up with tags or formatting instructions.

Not familiar with using Markdown syntax? No problem, it's quite simple. The format for hyperlinks includes 2 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 sending 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 live chat window, a shortcut, or a bot experience will format the hyperlink as you might expect:

Using Markdown for Sending Images

In addition to hyperlinks, you can use markdown syntax for sending images in the messenger. 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)

What About Fun Animated GIFs?

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

Summary

In this guide, you've learned about the options and the syntax for using hyperlinks in live chat, chat bot experiences, and shortcuts. Hyperlinks  are a quick way for you to link website visitors off to relevant content and pages on your site, or customize chat messages with images and animated GIFs! We've learned:

  • How to use links in live chat, shortcuts and bots
  • The basics, copying and pasting links
  • Using markdown for hyperlinks
  • Using markdown for sending images
  • Using markdown for sending clickable images
  • How to send animated GIFs with Giphy

Request a Live Demo

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.