Guide Theme Customization

All the Guides built can be customised to align with your brand identity. With DeepConverse’s intuitive Theme Customization tool, you can now effortlessly set the tone for your Guides and tailor it precisely to your business needs. This feature puts the power of design in your hands. Where to Find: To access the Guide theme settings in the DeepConverse dashboard, proceed to the third icon located on the leftmost side of the screen. Upon hovering over this icon, a submenu will appear, presenting various options. Within this submenu, locate and select the 'UI' option. Clicking on 'UI' will take you to the Guide theme settings page.

Page Overview: The page consists of two parts: 1. Settings:- This section of the page allows us to control the entire theme settings, make changes to it, write custom scripts etc. 2. Guide View:- This section of the page allows us to view the changes made to the theme in real time and the same would reflect in production.

We will now explore the various elements within the ‘Settings’ section of the page. Theme settings: 1. The first option under theme settings offers a dropdown which lets the user choose a theme for the Guides to have. There is also a button next to the dropdown labelled ‘New’ which allows a user to create a custom theme to implement on the Guides. By default, you will see ‘default_guide_theme’in the dropdown. 2. The next option is to set the Header Logo. This logo in a Guide shows up while it is loading and also on the top of the Guide. Users will need the logo URL to be able to add a header to the Guide. Header Logo while loading of the Guide: Header Logo when the Guide is running: 3. Header Logo Height and Width: Users can customise the uploaded logo by setting the logo height and width as per their wish to meet their business requirements for a better experience. 4. Primary Colour: The colour set over here acts as a primary colour for all the Guides and can be defined in multiple ways such as choosing the colour directly, defining the Hex code for a colour, defining RGBA and can also be chosen from a spectrum. Primary colour affects all the clickable elements in a Guide. Configuration Settings: This section consists of 3 sub parts which are as below: 1. Launcher 2. External Styling 3. External Scripts Launcher: This sub part further consists of 4 options which can be enabled or disabled by the user as per the business requirements. They are listed as below: 1.1 Show History - This option allows the user to take a glance on the path they have taken through the guide to reach a particular solution. Disabling this will remove the option for users to view the path covered. Button to check history: Upon clicking the History button, users can check the path traversed. 1.2 Show Header - This setting allows the user to either show/hide the header basis the requirement. 1.3 Show Restart - Enabling or disabling this option will determine whether the ‘Start Over’ button is displayed or hidden for users. This button allows users to initiate a guide restart at any juncture throughout the resolution process. 1.4 Continue on End - This feature grants users the ability to backtrack to any step upon completing a guide. Activating this option will present users with a 'Back' button upon reaching the guide's conclusion, facilitating the correction of previously chosen options. 2. External Styling: External Styling consists of two options inside it. The first option is CSS styling and the second option is to add a stylesheet. In case a user wants to go beyond the default customisation options provided to modify any elements in the Guide, they can implement a custom CSS here to achieve the same. Selecting this option will open an editor for the user to write their style and upon saving the same should reflect on the UI. Additionally, if a user has a set of styles defined in a stylesheet, the user can insert its link to achieve the defined style in the guide. Also the user can have multiple stylesheets added to achieve their requirement. 3. External Scripts: Users have the capability to integrate a JavaScript code or segment within this interface to attain specific stylistic or functional enhancements tailored to their needs. Opting for this feature will initiate an editor, enabling users to compose their script, and subsequent saving will seamlessly manifest the alterations on the user interface. Whether through the inclusion of an inline script or by referencing a script via URL, this functionality empowers users with comprehensive autonomy to customize their guide according to individual preferences.