Skip to main content

​
AskAI Widget Customization Fields

Dappier’s fully white-labeled, responsive AskAI widget seamlessly integrates into any website, delivering AI-powered answers, insights, and personalized interactions. With extensive customization options, you can tailor the widget’s appearance, behavior, and functionality to match your brand’s identity and meet user needs. Use the following options to customize the widget as needed and create a seamless, engaging user experience. From advanced styling settings to flexible configurations for content recommendations and tracking, the AskAI widget offers unparalleled adaptability to elevate your website’s engagement and user experience.

​
1. General

  • Title: Title text of the widget (Default: “Ask AI”).
  • Search Placeholder Text: Placeholder text in the search field (Default: “Ask a question…”).
  • Ask Button Text: Text displayed on the “Ask” button (Default: “Ask”, Max 6 characters).
  • Version: Select the version of the widget to use (Default: latest).
  • API Key: Select the API key to use for the widget.
  • Subdomain: Specify the subdomain for the widget.

​
2. Appearance

  • Main Logo URL: Specify a URL for the widget’s main logo that appears on the top right if enabled.
  • Chat Icon URL: Specify a URL for the widget’s chat icon.
  • Main Background Color: The background color of the widget (Default: #F2F2F2).
  • Ask Button Color: The color of the “Ask” button (Default: #674AD9).
  • Prompt Suggestion Background Color: Background color for prompt suggestions (Default: #674AD9).
  • Prompt Suggestion Text Color: Text color for prompt suggestions (Default: #FFFFFF).
  • Message Background Color: Background color for chat messages (Default: #FFFFFF).
  • Message Text Color: Text color for chat messages (Default: #000000).
  • Title Color: Text color of the widget title (Default: #3C3838).
  • Container Border Radius: Radius for the widget container’s corners (Default: 0px).
  • Element Border Radius: Radius for widget elements (Default: 4px).
  • Main Logo Width (Mobile): Width of your main logo when displayed on mobile devices (Default: 45px).
  • Chat Icon Width (Mobile): Size of the chat icon when displayed on mobile devices (Default: 16px).
  • Main Logo Width (Desktop): Width of your main logo when displayed on desktop devices (Default: 90px).
  • Chat Icon Width (Desktop): Size of the chat icon when displayed on desktop devices (Default: 31px).
  • Font Size Header (Mobile): Font size of the header when displayed on mobile devices (Default: 16px).
  • Font Size Default (Mobile): Default font size of the widget elements when displayed on mobile devices (Default: 16px).
  • Font Size Header (Desktop): Font size of the header when displayed on desktop devices (Default: 16px).
  • Font Size Default (Desktop): Default font size of the widget elements when displayed on desktop devices (Default: 16px).
  • Fixed Mobile Height: Set the widget height to a fixed value when displayed on mobile devices (Default: 350px).
  • Expandable Desktop Height: Set the widget height to expand to the specified value when displayed on desktop devices (Default: 500px).

​
3. Behavior

  • Enable Title: Toggle to display the widget title (Default: Enabled).
  • Enable Prompt Suggestions: Toggle to display prompt suggestions within the widget (Default: Enabled).
  • Enable Opening Content Links in New Window: Toggle to open related content in a new window in the chat response (Default: Enabled).
  • Enable Content Recommendations: Toggle to show content recommendations (Default: Enabled).
    Note: When enabled, the widget height will increase by 130px on desktop and 120px on mobile devices.
  • Enable Site Name: Toggle to display the site name in content recommendations (Default: Enabled).
  • Show “Powered by Dappier” label: Toggle to display “Powered by Dappier” label in the widget footer (Default: Enabled).

​
4. Advanced

  • Referring URL: A URL to refer to when interacting with the widget.
  • Disclaimer Link: A link to the widget’s disclaimer.
  • Custom Data: Additional custom data that can be sent along with the widget for tracking purposes. Needs to be configured in the widget embed code.
    Example: customData='[{"placementType": "top", "name": "sidewidget"}]'
  • Initial Search Query: A predefined search query when the widget loads. Useful for embedding the AskAI Widget in a search results page. Needs to be configured in the widget embed code.
    Example: initialSearchQuery="news articles"