Chatbot

Advanced Chatbot Settings

Overview

Configure various parameters in the DocsHound chatbot for a personalized and adaptable user experience.

User Parameters for Support Tickets

User ID

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

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

Use Unique Identifiers for User Tracking

Assign each user a unique identifier to accurately link support tickets with individual users.

User Email

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

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

Additional User Information

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:

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

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:

html
<docshound-chat user-avatar-url="https://example.com/path/to/user/avatar.jpg"></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'.

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

Look and Feel

Adjust Theme

To adjust the appearance of the chatbot, set the theme attribute in the docshound-chat web component. 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:

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:

html
 <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:

html
  <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.

html
 <docshound-chat trigger-label='Start Chat'></docshound-chat>

All Parameters

Parameter

Description

Default Value

agent-name

The name of the agent responding in the chat.

Value set in DocsHound

agent-avatar-url

The URL for the avatar image of the agent.

Value set in DocsHound

user-id

A unique identifier for the user interacting with the chat.

Undefined

user-email

The email address of the user interacting with the chat.

Undefined

user-name

The display name of the user interacting with the chat.

'You'

platform

The platform where the chat is being used: 'site', 'app', or 'docs'.

'app'

user-avatar-url

The URL for the avatar image of the user interacting with the chat.

Generic user avatar

first-message

The initial agent message prepopulated when the user opens the chatbot widget.

Value set in DocsHound

theme

Defines the theme of the chat interface, either 'light' or 'dark'.

Value set in DocsHound

position

Defines the position of the chat widget on the screen: 'center' or 'right'.

'right'

accent-color

Sets the accent color of the chat interface (e.g., for buttons or highlights).

Value set in DocsHound

trigger-label

The label for the trigger button that starts the chat.

Value set in DocsHound