Webchat

Overview

Web-chat is a channel of communication that allows visitors to your website to engage in conversation with your bot (often starting with an Intro Script and then accessing the Knowledge Base), as well as with your team (via Live Chat).

Partners can have multiple variants to embed on different webpages. Visit web-chat variations for more information.

For our accessibility statement and VPAT, see: https://mainstay.com/accessibility-statement/

In the Mainstay platform, you can filter the Insights dashboard, Conversations, and Contacts tools to include or exclude web-chat information. This is also available in Audiences via the Channels parameter and the Webbots (variants) parameter.

Visitor Experience

The web-chat will appear in the bottom-right corner of the page on which it's embedded. You can configure this appearance (see below).

When this button is clicked, the web-chat will appear. (Note that this will be full-screen on mobile devices). The web-chat can be minimized with the - button in the top-right corner.

There are several features in this window:

• back-and-forth messaging: Messages from the bot will be have your preferred icon on the left. Yes/No and Multi-choice questions will have show clickable buttons and disable the text input.
• text input field: Below the main messaging area is a text input area where the user can type a question, and click the arrow or press Enter to submit.
• quick action menu: The three-line button in the bottom-right gives shortcut access to #commands. Selecting one of these will immediately jump to the associated script. See Commands for more information.
• language selector: This searchable menu allows the user to set a language preference. All future messages from the bot will be automatically translated into their preferred language. All messages coming in from this user will be presented in the Mainstay platform in the original language and with an English translation. See multi-language support for more information.
• conversation reset: The rotation button on the bottom-right will clear all messages and initiate the intro message again. In the Mainstay platform, it will be clear that the user has reset the chat, but existing message history will not be deleted.

Title

• #pause: This is not relevant to web-chat users, so it is not displayed here.
• #language: This is already covered via the Language Selector (see above), so it is not displayed as a Quick Action.
• #login and #logout: If you have the Authentication feature enabled, these allow contacts to authenticate (and end an authenticated session) for personalized messages. This can be configured in the Contact Authentication section of the Settings page.
• #changename: This allows contacts to set a preferred name for personalized messages. This can be disabled on the main Settings page.

Expiration

By default, a web-chat visitor can return at any time, and the bot will remember who they are and display their previous conversation. You can instead configure the bot to forget them after some amount of inactivity, at which point the web-chat would start a new session and create a separate contact record.

• 1 hour
• 1 day
• 7 days
• 30 days
• 180 days
• 1 year
• Never Expire

// Mainstay Web-chat
(function() {
  window.admitHubBot = {botToken: 'YOUR_BOT_TOKEN_HERE', collegeId: 'YOUR_COLLEGE_ID_HERE'};

  var script = document.createElement('script');
  script.src = "https://webbot.mainstay.com/static/js/webchat.js';
  document.body.appendChild(script);

  var stylesheet = document.createElement('link');
  stylesheet.href = 'https://webbot.mainstay.com/static/css/webchat.css';
  stylesheet.type = 'text/css';
  stylesheet.rel = 'stylesheet';
  document.body.appendChild(stylesheet);
})();

Moving the Web-chat Button

You may want to move the web-chat button to avoid collision with a sticky footer on your website. By default, it's 16px from the bottom of the page, so this CSS would move it up another 50px:

<style>
  ._admithub_embed-container .activation-button {bottom: 66px !important;}
</style>

<style>
  ._admithub_embed-container .activation-button {z-index: 1000000001 !important;}
</style>

<style>
  ._admithub_embed-container .activation-button {right: unset !important; left: 20px !important;}
  ._admithub_embed-container #admithub_message_iframe {right: unset !important; left: 16px !important;}
  ._admithub_embed-container .webchat-iframe {right: unset !important; left: 0px;}
  @media (min-width: 768px) {
    ._admithub_embed-container .webchat-iframe {right: unset !important; left: 20px !important;}
  }
</style>

Changing the Web-chat Window Size

<style>
  #admithub_webchat_iframe {max-width: 500px; max-height: 90%;}
</style>

<a style="" href="#" onclick="document.querySelector('._admithub_embed-container .activation-button').click();">Skip to Chat</a>

Revisit your code editor or website builder to ensure the Mainstay web-chat embed is only present once.