Before you begin your Website Chat set up, you will need to have a theme created, and know how you want your chats to be routed. Users have the ability to route chat activity to all users on a Team, individuals, workflows, routing groups, or ChatBots.
Chat users have the ability to create multiple chat experiences that can render under different conditions. For example, you may choose to have a delayed chat experience on product pages in order to allow visitors time to consume your content, but have a more instant experience for visitors that land on your homepage.
Setting Up a Website Chat
- To get started, navigate to the "Links & Website Chat" section of the Admin menu, and select “Create New Website Chat.”
- You'll begin the setup process by naming the Website Chat. The Display Name for the chat is shown conditionally when you use either the Initial Form Submission or Ending Pages options in your chat theme.
- You can then determine where you want the chat experience to route to. You have a few options when selecting your routing to location:
- You can route your chats to a routing group, which will send a notification to everyone in the group.
- You can route your chats to a workflow, which gives you the ability to create rules, manage how and when your chats will be presented, and determine who the chat will be sent to.
- You can route your chat to a ChatBot, which will collect information on and/or qualify the visitor, and then decide where the chat should be sent based on the information collected.
- You can also send chats to a specific individual.
- Users can then select several general options for website chat behavior, including:
- Theme: Allows you to select preset color and styling options for your chat experience. Themes are created in the “Themes” section of the Administrative menu.
- Chat Completion Action: Once a chat ends, users have two options for how this will display to visitors:
- When you select “Display Missed or End Messages in Chat,” the visitor will be allowed to leave a post-chat message within the text area at the bottom of the engagement window.
- By picking “Display Missed or End Pages” the visitor will see a special, branded form (created in the theme builder) to leave a message in.
- Ask for Data On End: When a visitor or rep ends the chat experience, users can present Data Asks™ to collect additional information, like their email address or their name.
- Tooltip Message On End: This option will display a message to the user when they end the chat if another action has been planned. It is most commonly used when a chat survey is launched upon chat close. Check out this article for more information on chat Tool Tips and Surveys.
- Ask For Data When Missed: When a chat is missed, you are able to ask the visitor to leave additional information about themselves, for example a contact email or number you could use to reach out to them.
- Routing Message: Routing messages are a best practice for providing a customized experience to users when the routing activity is taking place. Examples might include “We are now connecting you to a team member...” or “Hold tight while we find someone…”
- End Chat Message: This options is used to provide a final message to a visitor as the chat comes to a close.
- Missed Chat Message: With this option, users can provide a message that will display to visitors in the event that the chat was not answered, either because of availability or because of routing challenges.
- Follow Blacklist: Users can also opt to block blacklisted IP addresses and/or email addresses from being able to engage in a chat. These entities will be identified in the "Blacklist" section of the Administrative menu. By selecting this box, a chat option will not present to anyone visitors coming from any of your blacklisted entities.
Simply configuring the "End of Chat" options is an easy way to get started with website chat. However, configuring additional options, like asking for more data or providing additional options for missed chats, is a great way to further optimize your chat experiences. For example, a ChatBot can capture Data Elements while also offering options to explore more content.
- The "Website Chat Configuration" section allows users to configure the look and feel of the chat icon, and where it will display on the page. We'd aligning your chat icon design with our overall website design, but selecting a color that stands out on the page.
To preview what your configurations will look like, select the green bot icon at the top of the configuration screen.
- In the "Website Chat Animations & Behavior" section, users can also control when the chat prompt is displayed, and whether or not it will be animated.
- In "Proactive Messages," use can customize the design and position of their proactive message (a message displayed before the chat icon is selected), including borders, background colors, font size, etc.
a. You will begin by first selecting which design of proactive message you want to start with. You can select from three options including Legacy Message, Refreshed Message, and Banner Message.
b. Next you will customize the design elements. NOTE: For the Banner Message you will need to host the banner on a public website. The banner should be between 600 - 800 pixels wide and 120 - 240 pixels tall.
Add an image to your proactive message, like your logo or an icon, to create a unique experience.
- Once you have created the Chat Experience, you will need to add the code to the specific pages you want to have the experience on. You do not have a limit on the numbers of experiences you create for your users. To render multiple experiences on your site, you can use the following deployment methods:
- You can manually apply the specific experience code to your site.
- You can use a logic statement in your website code to use this code snippet in lieu of a different experience when a page level variable is passed.
- You can use workflows to manage the presentation of different chat experiences.
Embedding Terminus Chat into Site Pages
In addition to having our animated bot appear in the bottom corner of the page, you also have the ability to embed a static Terminus Chat Bot into specific pages on your site.
Below is an example of what an embedded chat bot would look like on a website:
As you can see, the animated chat button still appears, however there is also the ability to chat within the actual web page itself.
To do this, you will need to embed the specific chatbot link using iFrame. An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a web page.
Within the Chat Experiences product, navigate to “Links and Website Chat” on the Admin panel. Select the dropdown menu in the top right corner and select Create New Link
- Create the Display Name for the link
- Select the destination you want the bot to route to.
Note: This may change depending on what you want the functionality of this bot to be. If you want it to have all the functionality of your main chatbot, route to your “Main Workflow”. If you would like it to have a different function, for example, to collect data but not give visitors the option to be connected to a live person, you can create a specific chatbot for that functionality and route it accordingly.
- Select your Chatbot theme
- Copy the link you have created using the purple “copy” button next to the URL
- In the code snippet below, replace Insert bot link here with the copied link. Leave the quotation marks and delete any spacing, if any, between the link and the quotation marks
- You can change the height and width of your static bot by changing the dimensions within the quotation marks:
<iframe src="INSERT BOT LINK HERE " width="560" height="315" allowfullscreen="allowfullscreen"></iframe>
- Copy your final revision of the code,
- Navigate to the page in which you want to embed the new iframe,
- Click "Edit", then toggle to the "HTML Editor", and paste your code where you would like it to appear on your page. Most likely, you will simply scroll to the end of the code that describes everything you typed at the top of that page.
- Paste your revised code into the HTML Editor,
- Click Save and view the results.
Since this will be embedded on a site page rather than the global footer, you will need to do this manually for each page you want the static bot to be presented on.