How to style your flow?

Flow styling can be done on visuals such as fonts, buttons, and backgrounds for the various flow elements as well as menu styling and dynamic effects.

Part 1: Details

All the changes that you make you'll get live updates in the preview on the left side. 

Skjermbilde 2023-03-29 kl. 10.55.19

  1. User interface:
        1. Buttons: Set the color of the buttons in a flow. This includes the buttons shown in surveys, promos, etc. 
          Skjermbilde 2023-03-29 kl. 10.55.55

          Pick one of our predefined colors, or click on the rainbow button to add your own color code:
          Skjermbilde 2023-03-29 kl. 10.56.17

          You can set four different types of colors: 
          1. Text color: The text on the button 
          2. Background color: The color on the button before clicking on it. 
          4. Text hover color: The color for the text when you hover over it. 
          5. Background hover color: The color on the button when hovering over it.
           
        2. Background: Set the background color for the hole flow. Pick one of our predefined colors, or click on the rainbow button to add your own color code. You can also upload a background picture. 
          NOTE! The background will default transparent when turning on iframe mode. 
          Skjermbilde 2023-03-29 kl. 11.25.26
        3. Position and background picture: When uploading a background picture, you can decide if the picture should be in the center or left/right. 
        4. Company: The styling is connected to the text coming from your company. (The right side in the preview)  
          1. Text color: The color of the text
          2. Background color: The background color for the text
          3. Company icon: The icon you want to be connected to your side. Choose between our predefined icons, or upload your own. 
          Skjermbilde 2023-03-29 kl. 11.29.00

        5. User elements: The styling connected to the text after the end user have answered a question etc. (The left side in the preview)  
          1. Text color: The color of the text
          2. Background color: The background color for the text
          3. Company icon: The icon you want to be connected to the user. Choose between our predefined icons, or upload your own. 
          Skjermbilde 2023-03-29 kl. 11.30.13
        6. Reward Icon: When the "Reward menu" is turned on, you also have the option to choose a reward icon. Choose between our predefined icons, or upload your own.  
        7. Company logo: The logo on shown at the top of the flow. 
          NOTE! When using Iframe mode, this will not be shown. 
  2. Menu setting: 
        1. Reward menu: When you have a flow where you can collect points, or you want to show the end user how many questions they have responded to, you can turn on the "reward menu". In 1.6 you can decide what the icon of the reward should look like.

          When turning this on, you also get two more options. These two are shown when the end user is clicking on the reward icon in an active flow and is meant to be informed about the reward, points, etc.: 
              1. Header Reward menu: The header for the information column. 
              2. Subtitle Reward menu: The information you want to provide regarding the reward, points, etc.
        2. Range list: You can turn this on if you have a flow where you want the contestants to compete against each other. This will tell the end-user in which place the contestants are. 
        3. Toppmenu: Top menu will show a banner on top of the flow, with a background color, your logo and the reward icon, and the range list icon.  
          1. Menucolor: Pick one of our predefined colors, or click on the rainbow button to add your own color code.  
            1. Text Color: The color connected to text on the sides in the banner on top (Next to your logo).
            2. Background color: The color behind your logo in the top banner.  
        4. Bottom menu: If you don't want your logo on top, or if you just want a big background picture for the whole page, turn the bottom menu on. 
          1. Menu color: Pick one of our predefined colors, or click on the rainbow button to add your own color code. 
            1. Text Color: The color that is connected to the text on the banner at the bottom of the flow. 
            2. Background color: The background color for the banner.
          2. Chat Icon: The icon in the bottom menu connected to the link for "Go back to the chat flow" 
          3. List Icon: The icon connected to the end users' overview of the flows they are connected to.  
          4.  Account Icon: The icon connected to your end user's reward account. 

NOTE! If you have turned on "Iframe mode" under settings, the flow with or without the use of Iframe will not have any color and logo on the top, or any background color or picture. It will be transparent. 

Part 2: Effect

Activate effects: When activating effects, you'll get confetti on surveys and promos. 
When activating, you can choose between different icons, and also if it should be one-color confetti, or multi-colored. Pick one of our predefined colors, or click on the rainbow button to add your own color code.   

NOTE! Keep in mind that the effects will be shown on all questions, all responses, and/or all promos, disregarding whether the response is negative or positive.