Chat Bot Bubble Options

Chat bot bubble options are configured by adding the chat bot bubble script and passing attributes to the strutfit-chat-bot-bubble component.

<script src="https://store-assistant-chatbotbubble.strut.fit" async></script>

<strutfit-chat-bot-bubble></strutfit-chat-bot-bubble>

Required Parameters

This component does not require any parameters.

Optional Parameters

• chat-mode: Sets which assistant mode opens from the bubble.

  • Type: string
  • Allowed values: faq, find

• background-color: Sets bubble background color.

  • Type: string
  • Default: #1976d2

• border: Sets the full CSS border value.

  • Type: string

• border-color: Sets the border color.

  • Type: string

• icon-color: Sets the icon color.

  • Type: string
  • Default: #ffffff

• disabled: Disables interaction when set to true.

  • Type: boolean

Reacting To Clicks

To run your own code when a shopper clicks this component, listen for the strutfit:chatBotBubbleClicked event. It is cancelable, so calling preventDefault() stops StrutFit opening the assistant and lets your storefront handle the click itself.

Example With All Options

<strutfit-chat-bot-bubble
  chat-mode="faq"
  background-color="#1976d2"
  border="1px solid #125ea8"
  border-color="#125ea8"
  icon-color="#ffffff"
  disabled="false"
></strutfit-chat-bot-bubble>