Integrate Chatbot (advanced)

Overview

Explore how to configure various parameters for the docshound-chat component to seamlessly integrate DocsHound's chatbot into your system, setting the stage for a personalized and adaptable user experience.

Business-Related Parameters

Set User ID

To set the user-id attribute, you must assign a unique identifier from your system. This identifier is essential for tracking interactions and support tickets accurately. Include the user-id attribute within the docshound-chat tag as follows:

<docshound-chat user-id="USER_UNIQUE_ID"></docshound-chat>

Set User Email

To pre-fill the user email for support tickets, set the user-email attribute in the <docshound-chat> webcomponent. This helps to ensure seamless communication by automatically including the user's email address in support ticket submissions. Add the attribute as shown:

<docshound-chat user-email="user@example.com"></docshound-chat>

Mode/Platform

Choose Platform

The platform attribute defines where the chatbot is used, such as a marketing site (site), application (app), or documentation platform (docs). To adjust the chatbot's behavior and track the source of tickets and logs, set the platform attribute accordingly. For example, to use the chatbot on a documentation site, you would set the attribute as platform='docs'.

<docshound-chat platform="site"></docshound-chat>

User Personalization

Customize User Name

To set the user-name attribute, include it as an attribute in the <docshound-chat> web component tag. This attribute customizes the chatbot interaction by displaying the user's name during the session. For example, to set the user name to 'John Doe', your code would look like this:

<docshound-chat user-name="John Doe"></docshound-chat>

Customize User Avatar URL

To personalize the chatbot interaction, set the user-avatar-url attribute in the <docshound-chat> web component. This attribute accepts a URL linking to the user's avatar image. Including this attribute will display the user's avatar in the chat interface.

Here's an example:

<docshound-chat user-avatar-url="https://example.com/path/to/user/avatar.jpg"></docshound-chat>

Look and Feel

Adjust Theme

To adjust the appearance of the chatbot, set the theme attribute in the docshound-chat webcomponent. You can choose either light or dark mode to match your preferred interface style. For example, to set the chatbot to dark mode, add theme="dark" to your docshound-chat tag.

Example usage in HTML:

  <docshound-chat theme="dark"></docshound-chat>

Adjust Position

To change the position of the DocsHound chatbot, you can set the position attribute to either center or right. This attribute adjusts where the chatbot appears on the screen. For example, to position the chatbot on the center, use <docshound-chat position="center"></docshound-chat>.

Adjust Accent Color

To customize the chatbot's accent color for buttons and highlights, set the accent-color attribute in the <docshound-chat> web component. This attribute accepts any valid CSS color value, allowing you to match the chatbot to your site's theme.

Example usage:

  <docshound-chat accent-color="#3498db"></docshound-chat>

The above code sets the accent color to a specific shade of blue. Adjust the color value to any desired CSS color to fit your design needs.

Adjust Trigger Label

To customize the label for the button that starts the chat, set the trigger-label attribute in the <docshound-chat> component. For instance, use <docshound-chat trigger-label='Start Chat'></docshound-chat> to change the button label to 'Start Chat'. This attribute allows customization to fit your platform's needs.

List All Parameters