- 31 May 2023
- 2 Minutes to read
- Print
- DarkLight
- PDF
Dialpad Self-Service Look and Feel
- Updated on 31 May 2023
- 2 Minutes to read
- Print
- DarkLight
- PDF
The Dialpad Self Service widget is highly customizable, allowing companies to match their branding and tone. It offers various options for creating an access point to query knowledge, including a pre-built widget or using APIs to develop a custom entry point. Configuring the widget involves setting the primary color, choosing fonts, customizing the logo and banner message text, and adjusting the floating action button's color, position, and size. Additional settings include adding an avatar, modifying top bar preferences, enabling tracking in test environments, and altering scroll behavior. Advanced customization can be done using CSS injection. Once configured, the auto-generated client application javascript can be deployed. The developer documentation provides more details on deployment options.
Completely customizable, the Dialpad Self-Service widget can be adapted to match your company's branding, voice and tone.
Creating an access point to query the knowledge is incredibly simple. Dialpad Self-Service has an out of the box widget capability. You are able to create a widget from within the Dialpad Self-Service platform in Account>Settings>Widget. You can also use our APIs to connect a search bar, contextual beacon or develop your own custom entry point.
Once you have configured the widget, hit save and the autogenerated script is ready for deployment.
Let's dive into the details of configuring the look and feel of your new Self-Service widget.
Configuring the theme and banner image
To set the primary color (theme) for the widget out of the box, click the 'PRIMARY COLOR' box and enter a hex or RGB code, or manually select the correct tone from the color picker. You can also choose fonts and customize the logo you want to appear in the widget by dropping the image address (url) into the 'LOGO' field. If you would like to add text on the banner beneath your logo, this can be edited in the 'BANNER MESSAGE TEXT' field below along with the height of the banner itself.
Configuring the floating action button (FAB launcher)
The floating action button (FAB) is configurable out of the box in 3 standard settings (and custom setting, configurable using CSS). The default setting is advised, however should you wish to add text to the call to action, you can do this with the question mark and bookmark style formats. It is also possible to change the color of the FAB independently of the primary color theme, as well as positioning and size.
Avatar & Toggle settings
If you would like to add an avatar to the bot you can upload an image of your choice using the 'Avatar' toggle. You can also change top bar preferences on the widget, giving the user buttons for menu control, instant escalations and reloading the conversation. in addition, it is possible to enable tracking in test environments and to alter the scroll behavior to the start or end of your responses depending on what is optimum for type of content in the widget.
Advanced settings & Customizations
The advanced settings box allows you to customize the look and feel of the widget and widget FAB launcher using CSS directly injected. See the developer documentation for more details on how to do this.
Client application Javascript
The client application javascript is auto generated for you to deploy once the widget has been configured. There are two scripts available: Preferred, self managed (you are in control of the widget); and Alternative, Dialpad managed (Dialpad are able to control the widget). See the developer documentation for more details on deployment.