Chat Bot Button Options

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

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

<strutfit-chat-bot-button></strutfit-chat-bot-button>

Required Parameters

This component does not require any parameters.

Optional Parameters

• id: Custom HTML id for the chat bot button element.

  • Type: string

• product-code: Unique product identifier used for products in StrutFit. Gives the chat context about the product the shopper is viewing. When set, the button only appears once StrutFit recognises the product.

  • Type: string

• product-name: Overrides the product name used in the app.

  • Type: string
  • Default: Product name set on the StrutFit dashboard

• product-image-url: Overrides the product image used in the app.

  • Type: string
  • Default: Product image set on the StrutFit dashboard

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

  • Type: string
  • Allowed values: faq, find
  • Default: faq

• variant: Sets the button variant style.

  • Type: string
  • Allowed values: contained, outlined
  • Default: contained

• disabled: Disables button interaction when set to true.

  • Type: boolean

• full-width: Makes the button fill the width of its container when set to true.

  • Type: boolean

• show-icon: Controls icon visibility.

  • Type: boolean
  • Default: true

• border-radius: Sets button border radius.

  • Type: string
  • Default: 0

• background-color: Sets button background color.

  • Type: string
  • Default: #3b82f6 for contained, transparent for outlined

• border: Sets the full CSS border value.

  • Type: string
  • Default: none for contained, 1px solid #3b82f6 for outlined

• border-color: Sets the border color.

  • Type: string

• font-family: Sets button font family.

  • Type: string
  • Default behavior: Attempts to inherit your website's primary font then falls back to -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

• font-size: Sets button font size.

  • Type: string

• font-weight: Sets button font weight.

  • Type: string

• color: Sets text color.

  • Type: string
  • Default: #ffffff for contained, #3b82f6 for outlined

• icon-color: Sets icon color.

  • Type: string
  • Default: Same as color

• icon-size: Sets icon dimensions.

  • Type: string
  • Default value: 16px

• padding-top: Sets top padding.

  • Type: string

• padding-left: Sets left padding.

  • Type: string

• padding-bottom: Sets bottom padding.

  • Type: string

• padding-right: Sets right padding.

  • Type: string

• icon-text-gap: Sets the gap between the icon and the text.

  • Type: string
  • Default value: 8px

• margin: Sets shorthand margin.

  • Type: string

• margin-top: Sets top margin.

  • Type: string

• margin-left: Sets left margin.

  • Type: string

• margin-bottom: Sets bottom margin.

  • Type: string

• margin-right: Sets right margin.

  • Type: string

• text-transform: Sets text transform (e.g. uppercase, lowercase, capitalize).

  • Type: string

• line-height: Sets the line height.

  • Type: string
  • Default value: 1

Reacting To Clicks

To run your own code when a shopper clicks this component, listen for the strutfit:chatBotButtonClicked 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-button
  id="chat-bot-button-123"
  product-code="{{ProductIdentifier}}"
  product-name="{{ProductTitle}}"
  product-image-url="{{ProductImage}}"
  chat-mode="faq"
  variant="contained"
  disabled="false"
  full-width="true"
  show-icon="true"
  border-radius="8px"
  background-color="#1976d2"
  border="1px solid #125ea8"
  border-color="#125ea8"
  font-family="arial"
  font-size="14px"
  font-weight="700"
  color="#ffffff"
  icon-color="#ffffff"
  icon-size="16px"
  padding-top="12px"
  padding-left="24px"
  padding-bottom="12px"
  padding-right="24px"
  icon-text-gap="8px"
  margin="8px 0"
  margin-top="8px"
  margin-left="0"
  margin-bottom="8px"
  margin-right="0"
  text-transform="uppercase"
  line-height="1"
></strutfit-chat-bot-button>