You have a number of ways to present your conversations to shoppers including in a pop up chat window and also embedded in page. Embedding is not available on all Gobot plans. If you do not see the embed option in Bot Settings, contact us to discuss an upgrade.
Pop up chat window:
Embedded quiz:
In bot build mode, click Bot Settings/General and you will see these options under "Select how the bot runs".
If you are looking for your conversation to be embedded and reside on a single page of your store, select "Embed only". If you select this option and a visitor engages with your quiz on your quiz page but then navigates to another page of your store and clicks on your bot widget, the chat window will not contain or reflect any of the quiz flow. When "Embed only" is selected your chatbot will reside only on the URL you select. If you have a popup chatbot on another page it will have no memory of any conversation that transpired in your embedded chat.
If you are looking for the conversation to follow your shoppers as they navigate your site, select either "Pops up under certain conditions" or "Remains on your site at all times" and then also select what URL you want your quiz conversation embedded. Scroll down on the Bot Settings/General tab and toggle the Embed option on and enter the URL where you want your conversational quiz to appear, as shown below.
By selecting either "Pops up under certain conditions" or "Remains on your site at all times" and then enabling the Embed option, as shown above, if a shopper engages with your conversational quiz on your dedicated quiz page, ultimately selects a product recommendation and is redirected to the associated product page, the chatbot will be available on that product page to continue the conversation with full history as to the quiz and previous related conversation, etc. This is very useful because shoppers that express interest in a quiz recommendation and find themselves on the product page for the recommendation they clicked on at the end of the quiz often have questions about the product that the bot can address on autopilot with full context of the ongoing conversation and quiz, etc.
It also works the other way around. Namely, a shopper often starts off on the main page or a product page and is not sure what to buy. The bot can suggest they participate in the shoppable quiz and redirect them to the quiz page where they can interact with the embedded conversational quiz. The entire chat history remains available to the chatter in the embedded context by clicking on the Show more messages button at the top of the page.
In this context, when you want the chat to follow a shopper, there is a specific way to control what chat flow appears in the popup chat window versus embedded on your selected URL. Click here to learn more about using an embed bucket to build a bot with such distinct flows.
Customizing your quiz page
Click here if you've already set up your quiz page and you want to learn how to customize it. If you are just getting started, continue on below to learn how to retrieve Gobot's embed code and paste it into a new quiz page you'll be creating for your store. If you are looking to customize your quiz page further, you can do so via custom CSS but that is only available on Gobot's managed plan.
Retrieving Gobot's quiz embed code
Upon entering your url in Bot Settings/General, as shown above, you will be presented with the option to copy embed code, which you should copy and paste in your store's HTML's where you want your quiz to appear, as detailed below.
For the embed only option:
When leveraging both the pop up chat window and embed display options:
Pasting Gobot's embed code into your Shopify store
Login to your store's admin dashboard. You'll need to add the quiz into a page of your store. Under Sales Channels on the left side of your admin panel, navigate from Online Store to Pages. Click on an existing page to go to its edit screen, or click on Add page to create a new page for your quiz.
Next, name your quiz, e.g., "Quiz", and click the < > button with the "Show HTML" tooltip in the "Content" section of the page edit screen.
This will switch the "Content" section to a field that allows you to directly enter HTML code. This is where you should paste the Gobot quiz embed code you copied earlier. After pasting the embed code in the "Content" section click Save.
After saving we suggest that you click "View page" to see how your quiz will look on your store. This will allow you to start interacting with your quiz (even if you haven't linked to this page yet from your store).
Optionally, use a pre-existing template for your new quiz page. You can select your pre-existing template in the drop down menu in the Template box on the right side of the screen above. Click here to learn about creating a template in Shopify.
Your theme's default layout may not be ideal for your quiz. For example, your theme may create an amount of empty space between your quiz's body embed and the edge of the page. It is for this reason that creating a template for your quiz page is suggested. You can edit the layout of your quiz page without affecting the code or layout any of your other existing pages.
Copyright 2020, Gobot LLC, All rights reserved.