The custom builder utilizes themes to determine the look and feel of each of your tours. This is a highly efficient workflow when you have a client that would like the same look and feel for each of their tours, as you can control how all their tours look with 1 theme. This also means that if the client updates their logo or has any other changes, you can change it for all tours through 1 theme.
When you create your first custom tour for a specific client, there are no themes. So step 2, for Add a theme, allows you to create a basic theme by adding a logo and choosing overall colors.
If this is not your first tour for this client and you have already created a theme for another tour that you would like, you can select that theme with the search bar in section 2. Add a theme
Opening a Theme
Once you have created your theme, you can perform more customizations by opening the theme.
You can open the theme by either:
1. Going into a custom tour, the edit tab, and the theme sub-tab. This will bring up a window showing the selected theme for the tour. You can then click the Edit Selected Theme button to open the theme in a new window. The benefit of this method is that you know the theme you open is associated with the tour you are trying to edit.
2. If you are very familiar with which theme you want to edit, you can also go to your client page and view a list of all the client's themes by clicking on the link that shows how many themes you have for that client.
Once you see your list of themes, you can open any by clicking on the Theme Id or Theme Name you want to open. If you name the same themes, it can get confusing, which is why the first method is preferred.
Editing a Theme
Once you have opened your theme, four section tabs are on the top.
Each section has an updated button on the bottom right that needs to be clicked for changes to be saved and reflected in your tour.
1) Theme Info
this section allows you to change the theme's name and add a logo.
The logo is used in the 2 places listed below in custom tours.
1. The start screen
2. Info tab
If you do not like having a background behind your logos, the platform will also accept transparent PNG files.
2) Menu Items
This section controls the icons in the right pane menu of the custom tours.
1. You can change the icon labels by changing the text in the fields.
2. You can change the icons by clicking the icon at the end of the icon label. The icon that is displayed is the one in use. When you click this icon, a pop-up will appear with a library of other icons that can be used.
3) Domain Whitelist
The domain whitelist section is very important. For custom tours to be embedded on your client's sites, the domain on which the tour is being embedded must be added to the whitelist. This prevents others from being able to embed your tours on their websites.
To add a domain, simply click on the highlighted field to enter the domain. After you enter it, you must hit the + sign to add it. Once added, the domain should show above the field where you can enter another domain with a - sign. Clicking the minus sign will remove a domain from the whitelist.
What happens when a domain is not whitelisted? If a domain is not on the whitelist and the tour is enabled on the site, the tour will not show up, and a 401 error will be displayed saying the domain is not authorized.
The styles section of themes controls the overall interface color. There are 4 sections.
The menu section controls the color of the menu on the right in your tour.
The Carousel controls the bottom navigation section of the tour.
The modal settings control the color of the popup windows from the menu buttons.
4) Start Screen
The start screen customizations allow you to change the colors of the button and button text.