Native Chat Widget

Chat Widget:

ADD YOUR CRM CALENDAR ID TO YOUR PROMPT

The long-awaited chat widget native to the platform. We wanted to go simple with a lot of functionality and a clean interface. The widget is able to book, call tools, and converse using all of your assistant’s configuration (find & replace, tools, etc.). This is also the first instance of a decoupled framework from us meaning this widget and the code behind it is completely separate from our main server so it will run even if we go down for whatever reason. This widget also – as long as your oauth is up-to-date and valid – will save all messages as a guest contact and show in your CRM conversation logs.

 

Install Guide:

1. Copy the code and put it in a sheet or element where you can edit it.

2. Fill in your assistant ID and your CRM location ID for your assistant and oauth to populate.

3. Configure the inputs and settings as you please.

4. Copy the code and paste it in a javascript / html element on the page OR in the page header.

5. You’re ready to go!

Copy Code:

Make sure to fill in your assistant ID and your location ID for oauth access and your assistant to populate correctly.

<script

      src="https://botdisplay.com/chat-widget.js"

      data-color="#44008a"

      data-assistant-id="172…00"

      data-account-id="j…O"

      data-position="bottom-right"

      data-theme="light"

      data-show-prompt="true"

      data-prompt-message="Ask me about voice AI 🚀"

      data-startup-message="How can I help you today?"

      data-assistant-name="Halie | AI Assistant"

      data-button-icon="chat"

      data-greeting-message="👋 Hey there! My name is {assistant_name} and I'm here to find out why you aren't making money with voice ai."

      data-prompts='[{"text": "What is AI Assistant?"}, {"text": "How do I get started?"}, {"text": "What does it cost?"}, {"text": "How does it work?"}]'

    ></script>



Inputs & Options:

 

• data-color: The hex code of your choice that is responsible for the color of the widget.

 

• data-assistant-id: Your assistant’s ID

 

• data-account-id: Your CRM Location ID where the assistant is from

 

• data-position: The position on the screen.

  • Choices (all lowercase): 

    • bottom-right

    • bottom-left

    • top-right

    • top-left

 

• data-theme: Dark or light theme.

  • Choices (all lowercase):

    • light

    • Dark

 

• data-show-prompt: true or false to show the message above the widget button on idle

  • Choices (all lowercase):

    • true

    • false

 

• data-prompt-message: The message in the prompt popup (if visible)

 

• data-assistant-name: The name displayed on the widget for the assistant

 

• data-button-icon: The icon of the idle widget button to open the actual conversation window

  • Choices (all lowercase): 

    • chat (default): Speech bubble icon

    • message: Message box icon

    • question: Question mark icon

    • headset: Support headset icon

 

• data-greeting-message: The first message in the chat widget from the assistant (the pre-determined message that shows when the user opens the widget)

 

• data-prompts: Allows you to add prompts to the widget to get the user to click on pre-determined questions (that could be fine-tuned in your knowledge base) to start the conversation