Customizing your embedded quiz

Everyone's store is a little different and Gobot users often want to customize their embedded quiz page.  For example, you may want to remove a title or adjust your quiz margins.

One effective and low risk method for making changes is by creating a custom page template in Shopify. This lets you use a custom page template without affecting any other page of our store.  Click here to learn how to create a template.

Gobot includes a number of easy to implement customizing options under Bot Settings/Style/Embed. Here you can adjust the height and width of your embedded chat window as well as its background color.  You can also adjust font size.  If you select, "Automatically expand to fit chat", the embedded window used to accommodate your chat will automatically expand in height to fit your conversation as it evolves.  Also, while not shown below, you can also use custom CSS to make additional adjustments (only on certain Gobot plans, contact us to discuss).  

To make sure that your embedded conversation is compatible with your Shopify store, you should make sure that the max content width isn't larger than the max content width set for your website's pages.  For example, if the max width of content for your theme is 800px, your quiz layout settings should be set to the same width. The particular max width of your store's content may depend on the theme you're using. 

To find the width values of your theme's settings, you'll have to navigate to "theme.scss.liquid" under the Assets folder when editing your theme's code.

NOTE: your theme's default width settings are designed to be compatible across multiple devices. Therefore, we don't recommend making any changes to your theme's default settings unless necessary. 

Other changes can be made directly in you Shopify admin.

Copyright 2020, Gobot LLC, All rights reserved.


Was this article helpful?

You might also find interest in these related articles:

  1. Shopify template pages
  2. Embedding your quiz into your Shopify store
  3. Embed Bucket