Embedded AI

Embedded AI Page

The “Other Assistant Type” has the capability to provide quick answers to your users or leads based on the custom knowledge you add to this custom-trained AI Assistant.

Within this “Embedded AI Page”, you will find options to define the look and feel of the chat interface that will be presented in the following areas:

1. Chat Interface Embedded on Any Webpage: If you wish to embed the “Other Assistant” chat interface on any website or webpage, you will find all the necessary details on this page.
2. Chat Interface for the “AI Assistant Answers” Lead Magnet: The “Other AI Assistant type” can be used as a unique lead magnet during the campaign setup process to capture leads via a LeadsWithDemos form. Here, you will be able to adjust the complete look and feel of this chat interface.

The main functionalities on the “Embedded AI Assistant” page includes:

Embedded Code

The “Embed Code” section provides you with the HTML iframe code necessary to integrate the “Other Assistant” chat interface into your website or webpage. Embedding this code allows the chat interface to function seamlessly on any page, enhancing your users engagement, and lead capturing capabilities directly from your website.

Code Attribution Explained

style: Sets the width of the iframe to 100%, ensuring that it is responsive and fits within the designated area of your webpage. You can adjust this width to meet your specific needs.

height: Defines the height of the iframe at 500 pixels, providing ample space for the chat interface content. You can adjust this height to meet your specific needs.

src: The source URL directs the iframe to the hosted chat interface of the “Other Assistant.” This is where the chat content will be loaded from, ensuring it pulls data and functionality from the LeadsWithDemos platform.

frameborder: Eliminates the border around the iframe by setting it to “0”, giving a neat appearance on the page. You can adjust this to meet your specific needs.

How to Embed the “Embedded AI Assistant”

• Copy the provided iframe code.
• Paste it into the HTML of your desired webpage where you want the chat interface to appear.
• Save and publish your changes to see the “Other Assistant” in action.

Ask a question design

The “Ask a Question” design section allows you to customize the appearance of the messages between the user and the AI assistant, as well as the font type for the entire chat interface and the loader style.

These personalization styles include:

• Background Color: The background color determines the main visual appearance of the chat interface.
• Font Family: The font family setting allows you to select the type of font used in the chat interface. You can select from various font options set in the Font Family settings.
• Loader Color: The loader color is the color of the loading animation that appears when the assistant is processing a request. It helps indicate to the user that their question is being processed.
• Font Size: This field lets you specify the size of the text displayed within the chat interface.
• User Message Background Color: This setting defines the background color specifically for messages sent by the user. It helps distinguish user messages from assistant responses for better clarity.
• User Message Text Color: The text color for user messages dictates how the text appears against the user message background. Contrast is important for readability.
• User Message Border Color: The color of the border that surrounds the user messages.
• User Message Border Width: This controls the thickness of the border surrounding the messages.
• User Message Border Radius: This setting determines the roundness of the corners of the message boxes.
• Assistant Message Background Color: This option controls the background color for messages from the assistant. Similar to the user message background, this helps in visually separating assistant communications from user inputs.
• Assistant Message Text Color: This setting determines the text color for messages sent by the assistant. Ensuring good visibility against the assistant message background is crucial for user comprehension.
• Assistant Message Border Color: The color of the border that surrounds the assistant responses.
• Assistant Message Border Width: This controls the thickness of the border surrounding the assistant responses.
• Assistant Message Border Radius: This setting determines the roundness of the corners of the assistant response boxes.
• Clear Button Text: This setting sets the text on the clear button.
• Clear Button Color: This setting sets the color of the clear button.

Message box design

The “Message Box Design” section allows you to customize the appearance of the chat interface’s message box. This is where users type their questions to interact with the custom-trained AI assistant.

In this section, you can enable users to upload files, including images or text, to the chat.

These personalization styles include:

• Background Color: The background color determines the main visual appearance of the message box in the chat interface.
• Attachment Backgound Color: This option configures the background color applied to any file or attachment that users want to upload within the chat.
• Button Color: This setting allows you to customize the color of the send button.
• Button Icon Color: This setting adjusts the color of the send button icon.
• Icon Color: This setting controls the color of upload icons (for images or files) within the message box.
• Placeholder Text Color: This option defines the color of the placeholder text displayed in the message input area before user interaction.
• Ask a Question Placeholder Text: This field allows you to set custom placeholder text that provides guidance to users on what to enter in the message box.
• Border Color: This setting determines the color of the border surrounding the message box.
• Border Width: The thickness of the border around the message box.
• Border Radius: This setting controls the roundness of the corners of the message box, allowing for a more stylized appearance.
• Allow image upload: This ON/OFF toggle setting enables or disables the option for users to upload images within the chat. When activated, users can share visual content to enhance their questions. This feature is particularly beneficial, as the AI assistant has vision capabilities, making it ideal for situations where you or your users want to ask questions based on an image.
• Allow file upload: This ON/OFF toggle setting enables or disables the option for users to upload files within the chat. When activated, users can share various file types, such as documents or presentations, to enhance their questions. This feature is particularly useful, as it allows users to provide additional context or resources for the AI assistant to consider when responding.

Source Design

The “Source Design” section allows you to customize how source information is presented in the chat interface. This feature not only enhances the user experience by providing relevant context for the AI assistant’s responses but also allows you to manage the visual styling of the source display.

These personalization styles include:

• Allow Source to Display: This ON/OFF toggle setting enables or disables the display of source information in the chat interface. When activated, users can see the sources referenced in the assistant’s responses, providing transparency and context for the information presented.
• Text: This area allows you to enter a custom source heading text that will be presented in the chat interface.
• Color: This setting defines the color of the custom source heading text.
• Background Color: This setting allows you to customize the background color of the source display area, enhancing visual appeal and ensuring consistency with your overall design.
• Text Color: This setting defines the color of the text used in the source information display.
• Border Color: This option allows you to set the color of the border surrounding the source information display.
• Border Width: This setting controls the thickness of the border that surrounds the source information display area.
• Border Radius: This setting determines how rounded the corners of the border surrounding the source area will be.

Feedback Design

The “Feedback Design” section allows you to customize the appearance and functionality of the user feedback prompt in the chat interface.

The “Other AI Assistant” from LeadsWithDemos can be embedded into any landing page or utilized for lead capturing in LeadsWithDemos campaigns. Its primary goal is to provide answers to your potential clients or leads using the content you supply as vector knowledge.

However, there may be instances when questions are not answered due to limitations in your AI assistant’s knowledge. In such cases, enabling the feedback functionality allows you to gather valuable user insights. This information can be leveraged to enhance your AI assistant’s knowledge base. In this section, you can decide whether to allow users to provide feedback and customize the design of the feedback prompt.

This feedback section features a Yes/No type of question. Selecting “Yes” indicates that the question has been answered, allowing the user to continue chatting. Conversely, selecting “No” means that the question has not been addressed. When clicked, a popup feedback form will appear, enabling your users to provide their feedback.

These personalization styles include:

• Allow User Feedback: This ON/OFF toggle setting enables or disables the feedback feature. When activated, users will be prompted with the question you entered in the “Question” field located within the Feedback Design section, following their interaction with the assistant.
• Question: This field allows you to customize the feedback question that is displayed to users. Providing a clear and concise question can encourage users to engage and provide valuable insights.
• Background Color: This setting allows you to customize the background color of the feedback prompt. A visually appealing background enhances the user experience and ensures consistency with your overall design.
• Text Color: This setting enables you to modify the text color of the feedback prompt, ensuring clarity and legibility against the selected background color.
• Thumb’s up Color: This setting allows you to define the color of the Thumb’s up icon.
• Thumb’s down Color: This setting allows you to define the color of the Thumb’s down icon.

Close button

The “Close Button” section allows you to customize the appearance and functionality of the close button in the popup chat interface, enabling users to easily exit the chat whenever desired.

When you use or link an “Other AI Assistant” to a LeadsWithDemos campaign for lead capturing, a modal window containing the AI assistant chat will appear once leads submit their details. This modal window includes a close button that allows users to decide whether or not to close the chat interface. You can customize the look and feel of this button to align with your overall design aesthetic.

These personalization styles include:

• Background Color: This setting allows you to customize the background color of the close button. A well-chosen background color helps the button stand out and enhances overall visibility.
• Hover Background Color: This setting defines the background color of the close button when the user hovers over it. Using a contrasting color encourages interaction and indicates that the button is clickable.
• Icon Color: This setting modifies the color of the close button icon.
• Hover Icon Color: This setting allows you to change the color of the close button icon in the modal chat interface when hovered over.
• Shape: This option allows you to select the shape of the close button. Customizing the shape can help maintain consistency with your design theme and provide a more engaging user experience.
• Size: This setting determines the size of the close button. You can choose from small (S), medium (M), large (L), or extra-large (XL) options to ensure the button fits well within the overall layout of the chat interface.
• Weight: Enables you to set the icon’s weight (thickness) of the close button.
• Padding: This setting lets you define the padding around the close button, ensuring that there is sufficient space between the button’s content and its edges for improved accessibility and touch interaction.
• Margin: This option controls the margin around the close button, helping to create appropriate spacing between the button and other elements in the chat interface.

Floating Button

The Floating Button feature allows you to add a sticky button that appears when your leads close the chat interface modal.

After receiving answers from your AI assistant via the chat interface modal, leads can close the modal, and the floating button will remain visible. This button allows users to easily reopen the chat interface modal and resume their conversation with the AI assistant.

If this option is enabled, the conversation with the assistant will persist. This means that even if the modal is closed, the chat history will remain accessible to leads at any time by clicking the floating button, without needing to submit the lead capture popup form again. However, once the page is reloaded, the chat conversation will be reset, and users will need to submit the popup form to access the AI assistant chat interface once more.

This feature includes an ON/OFF toggle. When activated, the floating button will be displayed whenever the chat interface modal is closed by the lead, and the chat interface modal will only reappear when the user clicks on the floating button.

The personalization options for this floating button include:

• Button Text: This field allows you to specify the text that will appear on the floating button. It should clearly state the action you want users to take or any short call-to-action (CTA) you wish to include, such as “Show Chat”.
• Font Family: This dropdown list lets you choose the font style for the text on the floating button. You can select from various font options set in the Font Family settings.
• Background Color: This setting allows you to define the background color of the floating button.
• Text Color: Here, you can choose the color of the text displayed on the button. Selecting a color that contrasts well with the background will enhance readability and visibility.
• Background Image: This option lets you upload an image to be used as the background for the floating button. You can click “Click to Upload Image” to select a file from your computer, adding a more personalized touch to the button’s design.
• Style: This setting allows you to choose the shape of the floating button. You can select from different styles, including triangle, rectangle, circle, and semi-circle.

For each floating button shape, you can position it in various places. For example, the triangle or circle shapes can be placed at the top-right, top-left, bottom-left, or bottom-right. The rectangle and semi-circle shapes can be positioned at the top, right, bottom, or left.

Default Screen Design

The “Default Screen Design” section is a customizable area within the chat interface that appears when users first interact with the AI assistant. This section aims to provide an engaging and informative introduction, effectively setting the stage for communication.

The primary goal of the “Default Screen Design” is to create a welcoming and user-friendly entry point for those new to the chat interface. By offering an inviting greeting, presenting example questions, and providing a clear message input area, this section helps users feel more at ease and guides them toward productive interactions with the AI assistant.

The personalization options for this floating button include:

• Show Default Screen: An ON/OFF toggle that allows you to enable or disable the default screen that appears when the chat interface is first loaded.
• Greeting Text: This field allows you to customize the initial greeting message displayed to users upon opening the chat interface.
• Background Color: This setting enables you to select the background color for the default screen area.
• Text Color: This option determines the color of the text displayed on the default screen.
• Border Color: This setting controls the color of the border around the default screen area.
• Question Heading: This is a customizable field where you can specify a title for the suggested questions area. The example shown as “Example Questions” helps participants identify the purpose of this section.
  • Text: This field provides you with the option to add custom text that informs users about the intent of this section, reinforcing that it contains suggested questions to facilitate their interactions.
  • Color: This setting allows you to define the color of the text displayed for the suggested questions.
• Default Questions: This section lets you input suggested questions that users can click on to start their engagement with the AI Assistant. The interface includes a “+” icon, which allows you to add more questions easily, enhancing user experience by providing them with clear options to initiate their conversation.
  • Background Color: This setting allows you to choose the background color of the suggested questions section.
  • Text: This defines the color of the suggested questions.
  • Border Color: This setting defines the color of the border surrounding the suggested questions.
  • Border Width: This specifies the thickness of the border around the suggested questions.
  • Border Radius: This setting allows you to set the roundness of the corners of the border surrounding the suggested questions.

Reset to Default, Preview Design and Save Buttons

At the bottom of the Embedded AI page, you will find two buttons: the “Reset to Default”, “Preview Design” button and the “Save” buttons.

Reset to Default Button

As its name suggests, this button is designed to reset all values you have modified, allowing you to start fresh again.

Preview Design Button

This button allows you to preview the current design settings of your chat interface while you are adjusting the look and feel of the chat interface modal, as well as after the changes have been saved. Clicking this button will open a preview window where you can see how your customizations look in real-time. This feature is useful for ensuring that the design aligns with your expectations before finalizing any changes.

Save Button

This button saves all the changes you’ve made to the chat interface settings. Once you have completed your customizations and are satisfied with the design, clicking this button will securely store your settings, making them active in the chat interface.