Styling is the second tab in the quiz builder and the next element you’ll need to configure. This is where you make the quiz look like its perfectly at home on your site by matching the colours and fonts. It’s super important to make customers feel like they’re communicating directly with you whilst they are completing the quiz and the styling goes a long way in achieving this. You might want to complete the styling tab before you add your questions and answers as it will give you a feel for how the quiz screens work but it's totally up to you.
When you click into the styling tab in the quiz builder, the first thing you’ll need to set up is the fonts you’ll want to use throughout the quiz. We recommend matching the fonts used on your store. You can choose different fonts for the titles, text and button texts. If you don't know which fonts are used on your site then you can find them by right clicking on your site and choosing inspect. then select the arrow in a square icon at the top left of the inspect screen and hover your mouse over the desired font on your site. a box will appear with all the design elements where you can see the name of the font.
.png)
Now you know the name of your font, go back to the quiz builder and simply find the font from the drop down list of Google fonts for the required element (title/text/button text). If your exact font isn't there, try one that looks close and drop us an email at support@helpmechoose.ai and we’ll see if we can get it added for you.
The goal here is to make the engagement tab stand out just enough to get noticed to but not too much that it looks out of place. We recommend using one of the colours used within the colour pallet of your site, but maybe not the primary one. This should help to make sure the engagement tab doesn't get lost on the page and stands out just enough. You can find the colour codes used on your site by following the same process as above to find the font type. If you click on the black circle next to where it says Tab Colour you can choose the colour you want the engagement tab to be. You can either click on the chart to choose the colour or you by clicking twice on the up/down arrows in the bottom right of the box. This will bring up HEX and field for you to enter the colour code from your site. This process is exactly the same for the tab text colour. You can see how this will look on the right hand side of the screen.
.png)
This is where you choose if you would like the engagement tab to appear on the left or right hand side of your site. The tab sits half way up the page and being an overlay it scrolls with the user as they move up and down your pages. If you already have other apps or chat bots installed on your site, make sure to choose the side where the Help Me Choose engagement tab wont interfere with them.
This is where you can style the engagement tab to have square or rounded edges. As you click the up/down arrows you can see the corners of the engagement tab changing. set this to the edges of your choice. We recommend matching the style of your existing buttons on your site to keep continuity. So if you have square buttons, keep the tab square but if you use rounded edge buttons then make the tab have rounded edges. You can then select the font you want to use, the font size and how bold you would like it to appear. By changing the tab text you can make the engagement tab say whatever you would like although we find that sticking with Help Me Choose delivers stronger engagement. Bubble text is where you can change the content of the expanding bubble question.
The survey section is where you will style the quiz question screens. The process for changing colours and fonts is the same as for the engagement tab section so work your way through using the same methods and check how it all looks by using the example on the right hand side of the screen. When you get to the Answers section, you will be asked to choose a border colour and then how thick you would like the border radius to be. Again you can see how the colours look on the right hand side of the screen.
.png)
When you get down to styling the buttons, this is where you’ll choose how you want the “previous” and “next” buttons to look. Here you will be asked to choose a colour for the “button background: hover state” this is where the colour of the button changes when a user hovers their mouse over the buttons. You can choose a different colour here or choose the same colour as you have chosen for the background if you don't want the colour to change on hover. Moving down you can change the text of these and the restart button.
