7. Customize

This guide describes the "Advanced" settings in the customization section of your chatbot widget that allow you to further refine the behavior and functionality of the chatbot.

Customization of the appearance of your chatbot

The customization page of your chatbot is divided into different tabs: Content, Appearance, Advanced, Offline Message and Custom CSS. In this guide, we focus on the Content tabwhich allows you to change the text that users see when they interact with the chatbot.

Content tab

In the Content tab, you can customize the text that is displayed to users when they interact with the chatbot.

Heading

• Enter heading - Enter a heading in the "Heading" field. This text is the first thing users see, usually at the top of the chat widget. Example: "I am your AI assistant."

Description

• Add description - Enter a description in the "Description" field. This should give users more context about the chatbot's capabilities, e.g. "Ask me anything. I try to answer based on the data on this website."

Placeholder text for chat input field

• Customize placeholder text - Enter the desired text in the "Chat Input Placeholder Text" field. This could be a prompt such as "Enter your message".

Welcome messages

• Add welcome message - Add a welcome message that users receive the first time they contact the chatbot. Type your message into the corresponding field and click on "Add welcome message".

Pop-up welcome message and delay

• Display welcome messages as a popup - Activate "Show welcome messages as popup" if you want the welcome message to appear as a popup.
• Set pop-up delay - Enter a value in milliseconds in the "Show popup after (ms)" field to specify after how many milliseconds the popup should appear after the page has loaded.

The popup does not disturb visitors to your homepage and can also be indicated by emojis on the chat.

Sample Questions

• Add sample questions - Enter a sample question to show users what they can ask the chatbot. Insert the question in the "Question" field and enter a label in the "Label" field. Then click on "Add Sample Question".

Preview of the changes

• Live preview - On the right side of the screen, you will see a live preview of the chatbot widget. As you make changes to the customization settings, this preview will update in real time to reflect the changes.

Saving your customizations

• Save adjustments - When you are happy with the changes, click the "Update widget style" button at the bottom right of the page to apply the changes to your Live Chatbot widget.
• Back without saving - If you want to return to the previous page without saving, click on the "Go back" button at the bottom left.

Appearance

Customize the appearance of your chatbot widget

This guide will help you personalize the visual appearance of your chatbot widget so that it fits seamlessly with the design and brand identity of your website.

Access to the settings for the appearance

1. Log in to your chatbot dashboard.
2. Click on "Customize" in the navigation menu on the left-hand side.
3. Within the "Customize" section, navigate to the "Appearance" tab, which is highlighted in the interface.

Customization of the appearance of the chatbot widget

Background color (Background Color)

• Select color - Locate the "Background color" field. Click on the color field to select a color or enter a hex code (e.g. #000000 for black) to adapt the color to the color scheme of your website.

Text color (Text Color)

• Change text color - In the "Text color" field, you can click on the color field to select a color or enter a hex code (e.g. #FFFFFF for white) that provides a good contrast to the background color to improve readability.

Corner radius (Border radius)

• Round off corners - Adjust the "Border radius" field to change the rounding of the corners of the chatbot widget. Enter a pixel value (e.g. 12px) to determine how much the corners should be rounded.

Position of the widget (Widget position)

• Set widget position - Select the position of the widget on your website by selecting "Left" or "Right". This determines on which side of the page the chatbot icon and the window appear.

Preview your changes

• Live preview - As you make changes to the appearance settings, the live preview on the right side of the screen will update to reflect your customizations. Use this preview to assess how the chatbot will look on your website.

Applying the user-defined appearance

• Save changes - Once you are happy with the appearance of the chatbot widget, click on the "Update widget style" button at the bottom right to save your changes and apply them to your website.
• Back without saving - If you want to return to the previous page without saving the changes, click on the "Go back" button at the bottom left.

Advanced Tab

Basic prompt

In the "Base Prompt" field, you define the basic instructions that your chatbot should follow. This serves as the basis for the chatbot's responses.

• Base prompt example - "You are a very enthusiastic chatbot who loves to help people! Your name is {{chatbotName}} and Your task is to answer queries based on the provided context and past messages, outputting in Markdown. If the provided data doesn't allow a response, reply with '{{defaultAnswer}}'."

This basic instruction can be customized according to your needs. For example, if you want your chatbot to reply exclusively in French, you could add the instruction: "Reply only in the French language".

Tip:

It is advisable to give the chatbot some basic information about your website in the base prompt to give the answers more context.

Default Answer

The "Default Answer" field allows you to define a default answer that the chatbot will use if it cannot find a suitable answer to a request.

• Example of a standard response - "I don't know how to answer that"
• You can adapt this text as you wish or translate it into another language. For example, you could write
  "Sorry, I don't have the answer to that. Please email hi@example.com for help."

This response gives the chatbot an opportunity to respond politely to requests that it cannot process.

Email capture (Collect Email)

If this option is enabled, the chatbot can request an email address from users if it is unable to answer their query. This is useful to enable follow-up with the customer.

Show "Read More" links (Show Read More Links)

If you activate this option, the chatbot will add "Read more" links to the answers that allow users to obtain additional information.

• Read More Text - Here you can customize the text that is displayed for the "Read more" links. By default, this is "Read more:"
• You can change this text to better suit your brand or the user experience.

Selection of the model for the chatbot

In this section, you can select the language model that your chatbot should use. Depending on the model selected, the performance and behavior of your chatbot will change. The available models are described in detail here:

1. GPT-3.5-Turbo

• Description - GPT-3.5-Turbo is an optimized version of GPT-3 and offers faster and more efficient performance. It is well suited for standard AI tasks and offers a good balance between cost and performance.
• BenefitsFast response times and broad applicability for everyday conversational tasks.

2. GPT-4

• Description - GPT-4 is the latest language model from OpenAI and offers improved language processing, more context understanding and more precise responses compared to its predecessors.
• BenefitsHigher accuracy and better quality of answers, ideal for more complex tasks.

3. GPT-4-Turbo

• Description - GPT-4-Turbo is a more powerful and faster version of GPT-4, combining the advanced capabilities of GPT-4 with optimized resources for faster computing.
• Benefits - High reaction speed with simultaneous use of the advanced GPT-4 functionalities. Ideal for scenarios where speed and precision are equally important.

4. GPT-4o

• Description - This model is an experimental variant of GPT-4 that is specifically designed for optimizations and extensions. It offers unique customizations aimed at specific use cases.
• Benefits - Extended customization options for very specific requirements or experimental application scenarios.

Conclusion - Choosing the right model depends on the requirements of your application. If you want a standard solution with high performance, GPT-4 or GPT-4-Turbo could be the best choice. For data protection-critical applications, a Private LLM from Konfuzio can offer an alternative by providing an optimal balance between performance and security.

Summary

The "Advanced" settings offer you flexible options to further customize the responses of your chatbot. You can refine the basic instructions, provide a default response and add additional features such as capturing email addresses and 'Read more' links. These configurations help make your chatbot more user-friendly and efficient while meeting the needs of your customers.

Custom CSS

Access to the custom CSS functions

• Log in to your chatbot dashboard.
• Select the "Customize" option in the navigation menu on the left-hand side to open the customization options.
• Click on the "Custom CSS" tab, which is the last option in the tab menu.

Understanding custom CSS

• Custom CSS (Cascading Style Sheets) allows you to make specific style changes to the chatbot widget that are not available in the standard customization interface. This includes changes to font sizes, colors, spacing and other visual elements.

Caution when using

• It is important to use the custom CSS function carefully. Incorrect CSS can lead to display problems or conflicts with the existing styles of your website.
• Only use Custom CSS if you are familiar with CSS syntax and understand the changes you are making.
• Please note that you are responsible for ensuring backwards compatibility for future updates of the chatbot platform.

Apply custom CSS

• You can write or insert your CSS code in the "Custom CSS" text area. For example, the code provided fits .ai-assistant-header p { line-height: 1.6; } The line height of the paragraphs in the header of the chatbot.
• You can target specific elements within the chatbot widget by their class names and apply the desired styles with standard CSS rules.

Preview of the changes

• As you apply Custom CSS, the live preview on the right side of the screen will update to reflect your changes. This allows you to immediately see how your code affects the appearance of the chatbot.

Saving your custom CSS changes

• Once you have completed your custom CSS customizations, click the "Update widget style" button at the bottom right of the screen to save your changes and apply them to the chatbot widget.
• If you decide not to apply the changes or return to the default styles, click the "Go back" button at the bottom left to exit the Custom CSS interface without saving.