Chat Bot Suggester Options

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

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

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

The suggester only appears once it has questions to show. See When the suggester appears.

Required Parameters

• product-code: Unique product identifier used for products in StrutFit. Used to load suggested questions for the product and to give the chat context about it.
  • Type: string
  • Only optional when questions is set

Optional Parameters

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

  • Type: string

• questions: Questions to show instead of the ones StrutFit suggests for the product. When set, suggested questions are not loaded. An empty array hides the suggester.

  • Type: string — a JSON array of strings, e.g. '["Are they true to size?", "What fit are these?"]'
  • Default: Suggested questions for the product

• 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 suggester.

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

• disabled: Disables interaction when set to true.

  • Type: boolean

• background-color: Sets the background color. Also used for the question backgrounds and the send icon.

  • Type: string
  • Default: #ffffff

• color: Sets the text color. Also used for the borders and the send button.

  • Type: string
  • Default: #000000

• border: Sets the full CSS border value.

  • Type: string
  • Default: 1px solid in the color value

• border-radius: Sets the border radius.

  • Type: string
  • Default: 12px

• font-family: Sets the 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

• padding-top: Sets top padding.

  • Type: string
  • Default: 16px

• padding-left: Sets left padding.

  • Type: string
  • Default: 16px

• padding-bottom: Sets bottom padding.

  • Type: string
  • Default: 16px

• padding-right: Sets right padding.

  • Type: string
  • Default: 16px

• 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

Reacting To Clicks

To run your own code when a shopper picks a question or sends their own, listen for the strutfit:chatBotSuggesterClicked event. Its detail includes the question being asked. It is cancelable, so calling preventDefault() stops StrutFit opening the assistant and lets your storefront handle the question itself.

Example With All Options

<strutfit-chat-bot-suggester
  id="chat-bot-suggester-123"
  product-code="{{ProductIdentifier}}"
  product-name="{{ProductTitle}}"
  product-image-url="{{ProductImage}}"
  questions='["What fit are these?", "Are they true to size?"]'
  chat-mode="faq"
  disabled="false"
  background-color="#ffffff"
  color="#000000"
  border="1px solid #000000"
  border-radius="12px"
  font-family="arial"
  padding-top="16px"
  padding-left="16px"
  padding-bottom="16px"
  padding-right="16px"
  margin="8px 0"
  margin-top="8px"
  margin-left="0"
  margin-bottom="8px"
  margin-right="0"
></strutfit-chat-bot-suggester>