The custom builder utilizes themes to determine the look and feel of each of your tours. This is an extermely efficient workflow when you have a client that would like the same look an 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 in step 2 for Add a theme, it 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 had 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, then the edit tab, and then 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 which will open the theme in a new window. The benefit of this method is that you know the theme that you open is the one 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 then view a list of all the themes of the client 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 of them by clicking on the Theme Id or Theme Name that you would like to open. If you name the themes the same it can get confusing which is why the first method is preferred.
Editing a Theme
Once you have opened your theme there are four section tabs on the top.
Each section has an updated button on the bottom right that needs to be clicked in order for changes to be saved and reflected in your tour.
1) Theme Info
this section allows you to change the name of the theme and also 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 the icon label. The icon that is the 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.In order for custom tours to be embedded on your clients sites, the domain that the tour is being embedded on needs to be added to whitelist. This prevents others from being able to embed your tours on their websites.
To add a domain, simply click in 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.