Use Case 1 - Working from a Blank Template (10 min)
Completion requirements
01 Introduction
In this use case demo, we will learn how to build a Course Satisfaction Survey using TITAN Web Survey. Of course, the Survey will match our company's branding.
Before we begin, let’s make sure everything we need is up and ready:
Before we begin, let’s make sure everything we need is up and ready:
- A proofread digital copy of the Survey.
- A folder with all the logos and images we will need.
- Then, make sure that the integration with Salesforce is active.
02 Customize the Start Slide
1. Open a new Web Survey Project, select a blank template to be able to customize your project, choose a color theme, and give your project a name.
2. Select the Start Slide on the left-hand menu and choose a slide layout from the menu on the right of the screen.
![choosing a layout for the start slide](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230313-134745.png)
3. Next, add a logo to your survey by clicking the empty logo box and either choosing an image from your library, selecting an image from Salesforce, uploading an image, or pasting an image URL. Below, the Titan logo has been selected from the image library. After this, click Apply. You can add an image to your Start Slide in the same way by first clicking the empty image box and then choosing your desired image.
![choosing an image](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230313-140417.png)
4. Customize the title of your survey by selecting the “Title” field, and then activating the Advanced Mode toggle switch on the Content panel.
![custom HTML for titles](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230313-141341.png)
5. Click the Advanced Mode gear icon and from here you can type or paste your title, as well as customize the look and feel of your title font. An identical process can be followed for customizing your Start Slide description, simply select the “Description” field to do so.
![custom HTML screen](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230313-142501.png)
6. Next, style the Start Slide by Clicking the styling icon on the left of the screen. Under styling, select the Start Slide option. From here, set your desired button position as well as the content position and color. You also have the option to set a background image.
![web survey styles - button and content position](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230313-142944.png)
7. Next, select the Web Survey styling drop-down. Here you can style the font of the survey as well as the button and content position. You can also set the desired content width, and select the Slides Scroll Bottom option to scroll up or down or set the Slides Scroll Right option to scroll left or right.
![web survey content width and slides scroll](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230314-160423.png)
8. Finally, set your desired survey navigation option by visiting Project Settings> Survey> Survey Navigation. In this case, we have decided to enable the Start Over button, which allows respondents to take the survey from the beginning.
![survey navigation settings](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230313-143747.png)
2. Select the Start Slide on the left-hand menu and choose a slide layout from the menu on the right of the screen.
![choosing a layout for the start slide](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230313-134745.png)
3. Next, add a logo to your survey by clicking the empty logo box and either choosing an image from your library, selecting an image from Salesforce, uploading an image, or pasting an image URL. Below, the Titan logo has been selected from the image library. After this, click Apply. You can add an image to your Start Slide in the same way by first clicking the empty image box and then choosing your desired image.
![choosing an image](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230313-140417.png)
4. Customize the title of your survey by selecting the “Title” field, and then activating the Advanced Mode toggle switch on the Content panel.
![custom HTML for titles](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230313-141341.png)
5. Click the Advanced Mode gear icon and from here you can type or paste your title, as well as customize the look and feel of your title font. An identical process can be followed for customizing your Start Slide description, simply select the “Description” field to do so.
![custom HTML screen](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230313-142501.png)
6. Next, style the Start Slide by Clicking the styling icon on the left of the screen. Under styling, select the Start Slide option. From here, set your desired button position as well as the content position and color. You also have the option to set a background image.
![web survey styles - button and content position](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230313-142944.png)
7. Next, select the Web Survey styling drop-down. Here you can style the font of the survey as well as the button and content position. You can also set the desired content width, and select the Slides Scroll Bottom option to scroll up or down or set the Slides Scroll Right option to scroll left or right.
![web survey content width and slides scroll](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230314-160423.png)
8. Finally, set your desired survey navigation option by visiting Project Settings> Survey> Survey Navigation. In this case, we have decided to enable the Start Over button, which allows respondents to take the survey from the beginning.
![survey navigation settings](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/126974315/image-20230313-143747.png)
03 Survey List Question
1. Once the Start Slide has been set up, you are ready to start creating slides. You can do so by clicking the Add Slide option on the left of the screen and choosing from the Question, Information, and End Slide types. Below, the Question Slide has been selected.
![add question slide](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230313-162057.png)
2. Next select a question type from the Popular, Survey, Input, Time, List, Boolean, and Misc categories. Below, the Survey List question type has been chosen:
![add slide - question type](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230313-162429.png)
3. After clicking Insert, your Survey List question will appear on your slide. You can edit the question text by selecting this field and typing your text in the Content section. As with the Start Slide, you can choose to enable Advanced Mode to tailor your text. In the example below, the question description was deleted by hovering over it and clicking the trash icon. This is because the question is already clear enough.
![advanced text](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230314-161105.png)
4. In order to further customize this question type, click the Edit Mapping button under Survey List Settings (where static values are automatically selected) on the right of the screen.
![survey list settings > content tab > edit mapping](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230313-163155.png)
5. Next, add desired answers to the screen. You also have the option to click “Add a choice” and add an additional answer to the screen.
![configure items add a choice](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230313-163436.png)
6. You can also choose to rename your slide by navigating to the slide’s kebab menu, clicking Rename, and typing in a new slide name. Respondents won’t see this name but it will help you navigate through your survey builder.
![rename survey question components](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230313-164235.png)
7. If you want to hide the logo on this slide, simply navigate to the left of the screen, select the styling icon, then the Logo drop-down, and click Hidden.
![hiding logo](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230313-164949.png)
![add question slide](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230313-162057.png)
2. Next select a question type from the Popular, Survey, Input, Time, List, Boolean, and Misc categories. Below, the Survey List question type has been chosen:
![add slide - question type](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230313-162429.png)
3. After clicking Insert, your Survey List question will appear on your slide. You can edit the question text by selecting this field and typing your text in the Content section. As with the Start Slide, you can choose to enable Advanced Mode to tailor your text. In the example below, the question description was deleted by hovering over it and clicking the trash icon. This is because the question is already clear enough.
![advanced text](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230314-161105.png)
4. In order to further customize this question type, click the Edit Mapping button under Survey List Settings (where static values are automatically selected) on the right of the screen.
![survey list settings > content tab > edit mapping](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230313-163155.png)
5. Next, add desired answers to the screen. You also have the option to click “Add a choice” and add an additional answer to the screen.
![configure items add a choice](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230313-163436.png)
6. You can also choose to rename your slide by navigating to the slide’s kebab menu, clicking Rename, and typing in a new slide name. Respondents won’t see this name but it will help you navigate through your survey builder.
![rename survey question components](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230313-164235.png)
7. If you want to hide the logo on this slide, simply navigate to the left of the screen, select the styling icon, then the Logo drop-down, and click Hidden.
![hiding logo](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/764342961/image-20230313-164949.png)
04 Rating Question
1. Now that you added a Survey List question, you can also add another question type, for example, a Rating question. To do so, add a new question slide, click the Rating option under “Popular”, and insert.
![adding rating question](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/945518743/image-20230313-165307.png)
2. Edit the question text and description in the Content panel. Next, select the rating scale, and under Content, configure minimum, maximum, and default values.
![changing rating settings](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/945518743/image-20230314-162154.png)
![adding rating question](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/945518743/image-20230313-165307.png)
2. Edit the question text and description in the Content panel. Next, select the rating scale, and under Content, configure minimum, maximum, and default values.
![changing rating settings](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/945518743/image-20230314-162154.png)
05 Multi Select Question
1. Another example of a useful Survey question, is the Multi-Select question type. Add a question slide, search under List, click Multi Select, and then Insert.
![adding multi-select list](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/488337119/image-20230313-170407.png)
2. Add a question text and description. Next, select the Multi-select picklist field, click Edit Mapping in the Content screen, and add your answer types.
![configure item list](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/488337119/image-20230313-171758.png)
3. Next, navigate to the Interactivity tab, select Number Choices, and in the Choices Count Limit set how many choices the respondent can make. Below, the number is set to 3, meaning that the respondent has the option to select all 3 of the answer options available. If there were more than 3 options it would limit the respondents to selecting just 3.
![multi select picklist settings](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/488337119/image-20230313-172442.png)
4. You can further customize this question by navigating to the Content tab and altering its width.
![change width of element](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/488337119/image-20230313-173001.png)
![adding multi-select list](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/488337119/image-20230313-170407.png)
2. Add a question text and description. Next, select the Multi-select picklist field, click Edit Mapping in the Content screen, and add your answer types.
![configure item list](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/488337119/image-20230313-171758.png)
3. Next, navigate to the Interactivity tab, select Number Choices, and in the Choices Count Limit set how many choices the respondent can make. Below, the number is set to 3, meaning that the respondent has the option to select all 3 of the answer options available. If there were more than 3 options it would limit the respondents to selecting just 3.
![multi select picklist settings](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/488337119/image-20230313-172442.png)
4. You can further customize this question by navigating to the Content tab and altering its width.
![change width of element](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/488337119/image-20230313-173001.png)
06 Styling the Slide Background Color
1. Once you have set up your desired slides, you are ready to set up the styling parameters of your survey. To do so, click the survey styles icon, then the questions drop-down, and set a font color for all your survey questions.
![changing color of questions](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/60498455/image-20230313-181146.png)
2. Next, set the background color for all slides in the Web Survey drop-down.
![changing slide fill](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/60498455/image-20230313-181349.png)
3. The Web Survey will customize styling for your whole survey while selecting the Current Slide drop-down enables you to set it for the current slide. The Current Slide option has fewer styling options and only enables you to set a fill color or background image.
![change color for current slide only](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/60498455/image-20230314-163157.png)
![changing color of questions](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/60498455/image-20230313-181146.png)
2. Next, set the background color for all slides in the Web Survey drop-down.
![changing slide fill](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/60498455/image-20230313-181349.png)
3. The Web Survey will customize styling for your whole survey while selecting the Current Slide drop-down enables you to set it for the current slide. The Current Slide option has fewer styling options and only enables you to set a fill color or background image.
![change color for current slide only](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/60498455/image-20230314-163157.png)
07 Finish Slide
1. Select the Finish Slide and add a title and description. You can also add an image of your choice.
![finish slide example](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/628478642/image-20230313-181646.png)
2. To ensure respondents only take the survey once, visit Project settings> Survey> Survey Navigation gear icon> Disable the “ Enable Again button”.
![survey navigation settings](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/628478642/image-20230313-181914.png)
![finish slide example](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/628478642/image-20230313-181646.png)
2. To ensure respondents only take the survey once, visit Project settings> Survey> Survey Navigation gear icon> Disable the “ Enable Again button”.
![survey navigation settings](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/628478642/image-20230313-181914.png)
08 Progress Styles
1. Add styling to navigation buttons by clicking the styling icon, then the Buttons drop-down, and customizing the colors of the Start, Back, Next, Submit, and Again buttons via a color palette or specifying a HEX color code.
![changing button colors](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/215551791/image-20230313-182304.png)
2. Next, click on the Progress drop-down and style the color, track color, and text of the progress bar, as well as its buttons by using a color palette or specifying a HEX color code.
![changing progress colors](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/215551791/image-20230313-182853.png)
![changing button colors](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/215551791/image-20230313-182304.png)
2. Next, click on the Progress drop-down and style the color, track color, and text of the progress bar, as well as its buttons by using a color palette or specifying a HEX color code.
![changing progress colors](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/215551791/image-20230313-182853.png)
09 Distributing the Survey
1. Once you have completed setting up your survey, you are ready to choose a distribution type. To do so, click the Publish button, then select your Distribution type. In this example, a Report has been chosen.
![distribution type screen](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/347514582/image-20230313-183132.png)
2. Select the Salesforce Report and the Record ID from the drop-down lists.
![distribution config](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/347514582/image-20230313-183352.png)
3. Next, set the Survey distribution method, in this instance, Mail is selected.
![distribution method](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/347514582/image-20230313-183501.png)
4. Set up an Email Template by configuring the Organization Email Template, Choose Email, and From Email Address fields using the drop-down menus.
![distribution content step](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/347514582/image-20230313-183709.png)
5. You can then decide whether or not to send a test email. In this instance, we will skip it. Finally, enter the survey result recipient data, add a comment, and either opt to Schedule Date or Send Now to distribute your email.
![distribution send step](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/347514582/image-20230313-183940.png)
![distribution type screen](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/347514582/image-20230313-183132.png)
2. Select the Salesforce Report and the Record ID from the drop-down lists.
![distribution config](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/347514582/image-20230313-183352.png)
3. Next, set the Survey distribution method, in this instance, Mail is selected.
![distribution method](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/347514582/image-20230313-183501.png)
4. Set up an Email Template by configuring the Organization Email Template, Choose Email, and From Email Address fields using the drop-down menus.
![distribution content step](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/347514582/image-20230313-183709.png)
5. You can then decide whether or not to send a test email. In this instance, we will skip it. Finally, enter the survey result recipient data, add a comment, and either opt to Schedule Date or Send Now to distribute your email.
![distribution send step](https://academy.titandxp.com/pluginfile.php/314/mod_custompage/topics/347514582/image-20230313-183940.png)