Chat Bot Suggester

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 suggester is a product page widget that invites shoppers to ask the assistant about the product they are viewing. It shows suggested questions in two rows that scroll horizontally, with a text field underneath for the shopper to type their own question.

Clicking a suggested question opens the assistant and sends that question straight to the chat. Typing a question and pressing send (or Enter) does the same with the shopper's own question.

Integrating the Chat Bot Suggester

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

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

Adding the Component

You can then place the component on the product page. Only the script above needs to be included once.

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

Replace {{ProductIdentifier}} with the unique product identifier you use for products in StrutFit. StrutFit uses it to load suggested questions for the product, and to give the chat context about the product when the shopper asks something. Your account manager can also provide you with an example product identifier that can be used for testing.

When the suggester appears

The suggester stays hidden while it loads its questions and only appears once it has at least one to show. It never appears when:

Chat is not enabled for your account.
StrutFit does not recognise the product code, for example because your product data has not been integrated yet.
There are no questions to show — no product-code and no questions attribute, or StrutFit has no suggested questions for the product.

While it is hidden it takes up no space on the page. If you need to react to it appearing, listen for its ready event.

Using your own questions

Pass a JSON array of strings in the questions attribute to show your own questions instead of the ones StrutFit suggests. When questions is set, StrutFit does not load suggested questions for the product, and the suggester appears as soon as it is ready.

<strutfit-chat-bot-suggester
  product-code="{{ProductIdentifier}}"
  questions='["What fit are these?", "Are they true to size?", "Can I return them if they don&apos;t fit?"]'
></strutfit-chat-bot-suggester>

Questions alternate between the two rows in the order you give them, so the first, third and fifth go on the top row. Setting questions to an empty array hides the suggester.

The attribute value must be valid JSON. Wrap it in single quotes so the double quotes inside the array don't end the attribute, and write any apostrophes in a question as '.

Required Parameters

product-code: The unique product identifier you use for products in StrutFit. Only optional when you pass your own questions.

Optional Parameters

id: Custom HTML id for the chat bot suggester element.
questions: A JSON array of questions to show instead of the ones StrutFit suggests for the product.
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 suggester. Valid values are faq or find. Defaults to faq.
disabled: Set to true to disable interaction.
background-color: Sets the background color. Also used for the question backgrounds and the send icon. Defaults to #ffffff.
color: Sets the text color. Also used for the borders and the send button. Defaults to #000000.
border: Sets the full CSS border value. Defaults to a 1px solid border in the color value.
border-radius: Sets the border radius. Defaults to 12px.
font-family: Sets the font family.
padding-top: Sets top padding.
padding-left: Sets left padding.
padding-bottom: Sets bottom padding.
padding-right: Sets right padding.
margin: Sets shorthand margin.
margin-top: Sets top margin.
margin-left: Sets left margin.
margin-bottom: Sets bottom margin.
margin-right: Sets right margin.

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 Suggester Options page.

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>