How to Create and Configure Website Chats

Overview

Configuring your Website Chat is one of the most important parts of your Terminus Chat Experiences setup. In the Chat Experiences application, Website Chat is where you will go to design the look and feel of your chat, and where you can find the javascript code that will need to be added to your website in order for a chat experience to render. Website Chat is also an area you might revisit to optimize your experience once you have seen data on chat usage and conversion activity.  

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.

Article Quicklinks:

Feature Tip

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

  1. To get started, navigate to the "Links & Website Chat" section of the Admin menu, and select “Create New Website Chat.”



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

 

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

 

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

Feature Tip

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.

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

Feature Tip

To preview what your configurations will look like, select the green bot icon at the top of the configuration screen.

 

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



  1.  In "Proactive Messages," users can customize the design and position of proactive message (a message displayed before the chat icon is selected), including boarders, background colors, font size, etc.

Feature Tip

Add an image to your proactive message, like your logo or an icon, to create a unique experience.

  1. 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: 

WebsiteChat_Screenshot.png

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 

image1.png

  • 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

image2.png

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

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.