This reference doc will walk through the descriptions for the properties involved in the ScriptTagProps interface, organized by component context for clarity.

Below is an example of what the script tag integration code looks like. You can add or remove properties as desired.

<link rel="stylesheet" href="https://assets.sitescdn.net/chat/v0/chat.css" />
<script defer src="https://assets.sitescdn.net/chat/v0/chat.umd.js" onload="initChat()"></script>
<script>
  function initChat() {
    window.ChatApp.mount({
      apiKey: "3f787a8ed5b5092b61932982f6837316",
      botId: "hitchhikers-chat",
      title: "Hitchhikers Chat",
      // showRestartButton: true,
      // onClose: () => { /* Your logic here */ },
      // showFeedbackButtons: true,
      // showTimestamp: true,
      // footer: "Powered by Yext",
      // placeholder: "Type a message...",
      // stream: true,
      // inputAutoFocus: true,
      // handleError: (e) => { /* Your error handling logic here */ },
      // onSend: () => { /* Your logic here */ },
      // messageSuggestions: ["What is Yext Chat?"],
      // openOnLoad: true,
      // showHeartBeatAnimation: true,
      // showUnreadNotification: true,
      // showInitialMessagePopUp: true,
      // ctaLabel: "Ask Our Chat Assistant!",
      // saveToSessionStorage: true,
      // ctaLabel: "Ask Me Anything!"
    });
  }
</script>

This code is also available on the Integrations screen of Chat within the platform. See this training unit to learn more.

Header Component Properties

Below is an example of setting showRestartButton to true. The result is a button that displays in the top right corner next to the close button.

Message Bubble Component Properties

By default feedback buttons and message time stamps appear when you hover over messages in the panel. This is what it looks like:

Chat Input Component Properties

The placeholder text where users input queries can be modified. Below the property is set to its default of placeholder: "Type a message...":

Panel Component Properties

If you want to add a footer to the chat panel you can add the footer property followed by the text you want displayed. In this example we used footer: "Discover Yext Chat: Click For Your Free Demo.

You can also add multiple message suggestions to help guide users on how to interact with your bot. The code should be formatted like this:

messageSuggestions: ["How do I add an entity?","What is Yext Chat?", "API Docs"] 

PopUp Component Properties

The pop up component properties are set to false by default. Here is an example of what it would look like to turn on the initial showInitialMessagePopUp, showHeartBeatAnimation, showUnreadNotification. The intial message shown is set in the General Settings screen of your bot settings.

If you want to display a message that differs from the intial messages of your bot, you can instead use the ctaLabel property. In this example we use ctaLabel: "Ask Me Anything!":

Headless Config Properties

Core Config Properties