Chat Bot Button

Remember, the Assistant Manager script must always be present for any StrutFit features to work. You may have already added this if you have integrated a StrutFit component in the past. If not, please add the script to all pages where StrutFit will be used. Ideally, we recommend adding it somewhere it is loaded on all pages (such as the <head>) so you don't have to think about it. The script is small and will be cached, so it won't affect your load times.

The chat bot button is an inline button that opens the assistant in chat mode. Unlike the Chat Bot Bubble, it sits wherever you place it in your layout, so it works well next to other product actions or in a help section. It only appears when chat is enabled for your account.

Integrating the Chat Bot Button

Add the following script once per page where the chat bot button should appear:

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

Adding the Component

You can then place as many instances of the component as you need on the page. Only the script above needs to be included once.

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

On a product page, pass the product code so the chat can answer with the product the shopper is viewing in mind:

<strutfit-chat-bot-button product-code="{{ProductIdentifier}}"></strutfit-chat-bot-button>

Replace {{ProductIdentifier}} with the unique product identifier you use for products in StrutFit. When a product code is set, the button only appears once StrutFit recognises the product, so if your data has not been integrated into our system yet the button may not appear. Your account manager can also provide you with an example product identifier that can be used for testing.

Required Parameters

This component does not require any parameters.

Optional Parameters

id: Custom HTML id for the chat bot button element.
product-code: The unique product identifier you use for products in StrutFit. Gives the chat context about the product the shopper is viewing.
product-name: Overrides the product name used in the app. By default, this uses the name set on the StrutFit dashboard.
product-image-url: Overrides the product image used in the app. By default, this uses the image set on the StrutFit dashboard.
chat-mode: Sets which assistant mode opens from the button. Valid values are faq or find. Defaults to faq.
variant: Sets the button variant style. Valid values are contained or outlined.
disabled: Set to true to disable button interaction.
full-width: Set to true to make the button fill the width of its container instead of sizing responsively to its text.
show-icon: Set to true or false to control icon visibility.
border-radius: Sets button border radius.
background-color: Sets button background color.
border: Sets the full CSS border value.
border-color: Sets the border color.
font-family: Sets button font family.
font-size: Sets button font size.
font-weight: Sets button font weight.
color: Sets text color.
icon-color: Sets icon color.
icon-size: Sets icon dimensions.
padding-top: Sets top padding.
padding-left: Sets left padding.
padding-bottom: Sets bottom padding.
padding-right: Sets right padding.
icon-text-gap: Sets the gap between the icon and the text.
margin: Sets shorthand margin.
margin-top: Sets top margin.
margin-left: Sets left margin.
margin-bottom: Sets bottom margin.
margin-right: Sets right margin.
text-transform: Sets text transform (e.g. uppercase, lowercase, capitalize).
line-height: Sets the line height. Defaults to 1.

Note: font-family will try to inherit your primary website font by default. If you change it, make sure that font is loaded on your website.

For a full list of options, see the Chat Bot Button Options page.

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>