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 article, you'll learn the options and the syntax for using hyperlinks in live chat, chatbot 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
There are a few ways to send messages to a website visitor when using Qualified. You can copy and paste directly into the live chat messenger, select a shortcut using a slash command, or have a chatbot automatically send a message as defined in an experience.
All of these mechanisms 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.
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 chatbot experience on your site, the link would appear exactly as you 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?
Markdown Syntax for Text 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 two parts: the readable text to show in the live chat messenger and 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 chatbot experience will format the hyperlink as you might expect:
Markdown for 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:
So an example image would look like this:
Placing an image using markdown will appear in the messenger, as shown below:
Markdown for Hyperlinked Images
In addition to sending images, you can use markdown syntax to send 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:
[](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
Or, add in your own personalized gif to customize your greeting like the one shown below:
To do this, you'll want to use the code:
[]
Summary
In this article, you've learned about the options and the syntax for using hyperlinks in live chat, chatbot 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 chatbots
- 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
.svg)
