​
Introduction

The web widget is one of the channels provided by Lovi to facilitate interaction with your AI Agent. Integrating it into your website is a very simple process: you just need to add the script we provide to your page’s code. Once embedded, the widget will automatically appear, allowing users to quickly and easily access the AI Agent without leaving your site. This solution enables real-time support and enhances the user experience, all within the environment of your website.

In this section, we will guide you step by step on how to configure the widget to perfectly fit your needs and preferences. From customizing its appearance to integrating it with your website, we will help you adapt the widget to best align with the aesthetics and functionality of your page, ensuring a smooth user experience that meets your expectations.

​
Overview of Your Web Widgets

On the initial configuration screen of the web widget, you will see a list of the widgets linked to your company. If you haven’t created any widgets yet, the list will appear empty. You can create one at any time by clicking the “Add Widget” button. If needed, you can use multiple widgets, whether on different websites or tailored to various needs, and manage them centrally from this interface. This will give you full control over the implementation and customization of each widget, making administration easy and hassle-free.

For each web widget, you will have the following information:

  • Avatar: the image you’ve chosen to represent your Agent. As we will see later, displaying the avatar in the widget is optional, so you don’t have to show it if you prefer not to.
  • Title: the name you’ve assigned to your web widget, which will help you easily identify it.
  • AI Agent: the AI Agent associated with the widget, enabling it to interact with users through your website.
  • Created at: the date when the web widget was created, which will help you keep track of versions and previous configurations.

Additionally, from this screen, you can perform three actions for each widget in the list:

  • Copy the script: you can copy the corresponding script to embed it in the code of the website where you want to integrate the widget.
  • Access Widget Web Configuration: you will have the option to customize the settings of each widget individually, adjusting its appearance and functionalities as needed.
  • Delete the widget: if you decide you no longer need a widget, you can easily delete it from the same screen.

​
Widget Web Configuration

From the web widget settings page, you’ll be able to fully customize it to match your style, needs, and the look and feel of your website.

​
Accessing the Script

In addition to the widget list, you can also copy the script directly from this section. If you want to set a default language for the widget, you can add the language attribute to the script. For example: language="en" for English.

​
Configuration

From this section, you can select the AI Agent you want to link to your widget. Note that in Lovi, you can create multiple AI Agents with different configurations, allowing you to tailor each one to specific needs or use cases. Additionally, you can select the languages your widget will normally support, ensuring a better experience for users visiting your website in different languages.

​
Floating message

The purpose of the floating message is to catch the visitor’s attention and ensure that your AI Agent doesn’t go unnoticed on your website.

You can choose the image that will appear in the widget’s launcher icon, as well as an engaging message to let users know your AI Agent is there to help—for example: “Hi there! Need some help?”. This message can be configured in the languages you selected earlier, so it will automatically display in the language set in the user’s browser.

⚠️ It’s important to include all the languages you want the message to appear in, because if a user’s browser is set to a language you haven’t configured, the floating message will not be displayed. To do this, make sure to add the desired languages in the previous section.

Here you can configure your widget’s header, which can be customized to suit your preferences and needs. Several layout combinations are available, and you can choose the one that best fits your brand style. When you select an option, the corresponding settings will open, allowing you to define the avatar, title, and brand image. Available combinations include:

  • Avatar + Title: Displays your AI Agent’s avatar along with its title.
  • Avatar + Brand Image: Displays the avatar alongside your brand image.
  • Title: Only the AI Agent’s title is shown.
  • Avatar: Only the avatar is shown.
  • Brand Image: Only your brand image is shown.

​
Colors

Choosing the right colors for your web widget is key to ensuring seamless integration with your website and your company’s branding. You can customize the color of various parts of the widget, as explained below. The color can be defined using RGB values, hexadecimal code, or HSL format—whichever works best for you.

❗The configurator also includes an eyedropper tool, allowing you to precisely select the exact color you want. This ensures that your widget perfectly matches your brand color, logo, or website design.

Let’s take a look at the widget sections where you can customize the color:

  • Main Color: This is the background color of the user’s messages within the conversation, as well as other interactive elements, such as the arrow used to send the message. It also affects the color of the widget’s floating bubble, in case no image has been selected instead.
  • Color Text: This is the color in which the user’s messages will appear within the conversation. ⚠️ Make sure the text color you choose contrasts well with the background color selected as the Main Color, to ensure the user has an optimal visual experience.
  • Background Color: This is the background color of the widget. ⚠️ Again, make sure the contrast is appropriate with the text color and the background color of both the agent’s and the user’s messages.
  • Header Color (Background): This is the background color of the widget’s header.
  • Header Color (Text): This is the color of the text in the header. It reflects in the header title (if you’ve chosen that option), but also in other elements such as the reload and minimize widget buttons. ⚠️ Make sure the color is suitable and contrasts well with the header background, even if you’ve chosen other options for the header, such as the brand image.

​
Form

If you need to collect user information before starting the conversation, you can do so by enabling the form feature. You can enable one or more of the following fields, and choose whether each should be required or optional for the user:

  • Name
  • Email
  • Phone

You can also include a link to your privacy policy to inform users about how their data will be handled.

If you enable the form feature but don’t activate any of these fields, a preliminary screen will appear in the widget, asking the user to confirm before starting the chat.

​
Data Collection

With this option enabled, the widget can collect and store user information by reading it directly from the client environment.

You can define custom keys (e.g., user_name, order_id) that the widget will track during the conversation. Once the widget detects a value matching one of these keys or matching a variable from the environment where the widget is installed, that value is automatically stored and injected into the conversation context. This ensures the information is available throughout the session, enabling more contextual and personalized interactions without requiring the user to repeat the same input.

​
Detecting Logged-In Users from Client-Side Storage

The widget can be configured to detect if a user is already logged in by checking for a specific variable stored in the browser’s localStorage or cache — such as a user_token, session_id, or client-email.

If the variable is present, the widget will automatically use it to adapt its behavior — for example, skipping login prompts, including any configured login forms.

To enable this:

  • Add a new key.

  • In the Storage key field, enter the name of the variable as it appears in the client’s environment (e.g., client-email).

In the Type dropdown, select User information.

Once configured, the widget will check for the value of this key when it loads and use it to prefill user data or trigger conditional flows as needed.

It is the integrator’s responsibility to ensure that the correct variable name is used and that the value is reliably available in the browser at the time of widget initialization.

​
Extra Widget Functionalities

Here you can continue customizing your widget to perfectly match your style and needs, ensuring seamless integration with your website:

  • Default country: Select the default country that will be displayed in the widget.
  • Position: By default, the widget appears in the bottom-right corner of your website, but you can also place it on the left side if you prefer.
  • Full Screen: By default, the widget does not occupy the entire screen; it opens on one side, allowing the user to still see most of your website. However, you can change this setting and opt for a full-screen view.
  • Hide Writing Bar: You can hide the input bar if you prefer the user not to type directly in the chat.
  • Hide Header: If you wish, you can hide the widget’s header.
  • Element DOM: This field allows you to embed the widget directly into a specific container on your webpage using a CSS selector (e.g., #my-container or .widget-class). When this field is set, the widget will no longer appear as a floating bubble in the corner of the screen. Instead, it will be permanently displayed within the specified container.

This option is ideal when you want the virtual assistant to be part of the main layout of your site—for example, inside a sidebar, a help section, or a contact page.

Important: Make sure the specified container exists in the DOM when the widget loads, otherwise it will not display correctly.

​
Translations and Texts (English)

This section allows you to customize the text that will appear in various fields of the widget interface according to the widget’s language settings.

Depending on the configured languages, you can provide translations for all supported languages to ensure a consistent user experience across locales.

The customizable fields include:

  • floating_message
  • write_message
  • enter_email
  • enter_policies
  • loading
  • form_message
  • enter_name
  • enter_phone
  • start_chat

By setting these texts per language, the widget will display the appropriate version based on the user’s selected or detected language.

​
Extra CSS

Here you can add custom CSS styles to adjust the widget’s appearance to match your website.

​
Test your web widget

From the knowledge base, you can preview your web widget in the playground. This tool allows you to check its visual integration and ensure the design matches your preferences. You can also test your AI Agent’s behavior in real time to make sure it responds correctly before deploying it to your website.