3.18.2 Functional Specifications

• Accessing the Channel Integration – Website Module:
  • Description: Users can access the Channel Integration – Website module through the following pathway:
  • Navigation Path: Click on Bot Space -> Channel Integration -> Website from the sidebar menu.
• Theme and Branding Customization:
  • Description: Configure various aspects of the chatbot’s appearance to match organizational branding and enhance user experience.
  • Functionalities:
    • Enable Domain Whitelisting:
      • Description: Allows users to enable or disable domain whitelisting for the chatbot.
      • Enable Domain Whitelisting: Toggle the switch to ON to activate domain whitelisting.
      • Disable Domain Whitelisting: Toggle the switch to OFF to deactivate domain whitelisting.
      • Domain Input: If enabled, users will be prompted to enter the domains that need to be whitelisted.
    • Bot Name (Header):
      • Description: Sets the name of the bot as displayed in the chatbot header on the website.
      • Edit Bot Name: Input field to enter or modify the bot’s name.
    • Chat Widget Styles:
      • Description: Choose the placement style of the bot icon within the chatbot interface.
      • Style 1: Bot icon appears on the left side of the web chatbot.
      • Style 2: Bot icon appears at the center of the web chatbot.
    • Font Style:
      • Description: Customize the text font used within the chatbot.
      • Select Font: Dropdown menu or input field to choose the desired font style.
    • Bubble Style:
      • Description: Define the appearance of chat bubbles in the chatbot interface.
      • Select Bubble Style: Choose from four available bubble styles to determine the look and feel of the chat bubbles.
    • Maximized Window:
      • Description: Configure the appearance of the chatbot when it is in a maximized (full-window) state.
      • Style 1: Curved Edge – Chatbot window with rounded edges.
      • Style 2: Normal Edge – Chatbot window with sharp, standard edges.
    • Minimized Window:
      • Description: Configure the appearance of the chatbot when it is in a minimized state.
      • Style 1: Rectangle – Minimized chatbot appears as a rectangular icon.
      • Style 2: Circle – Minimized chatbot appears as a circular icon.
    • Chat Header Properties:
      • Description: Customize the header section of the chatbot interface.
      • Color Type: Solid or Linear Gradient.
      • Background: Select the background color for the chat header using a color picker.
      • Font Color: Choose the font color for text displayed in the chat header using a color picker.
    • Chat Bubble Properties:
      • Description: Customize the appearance of chat bubbles for different user types.
      • Bot Bubble Color: Select the background color of the bot’s chat bubbles.
      • Bot Bubble Font Color: Choose the font color within the bot’s chat bubbles.
      • User Bubble Color: Select the background color of the user’s chat bubbles.
      • User Bubble Font Color: Choose the font color within the user’s chat bubbles.
      • Agent Bubble Color: Select the background color of the agent’s chat bubbles.
      • Agent Bubble Font Color: Choose the font color within the agent’s chat bubbles.
    • Button & Font Properties:
      • Description: Customize the appearance of buttons and their text within the chatbot interface.
      • Outline Button Color: Select the border color of outline buttons.
      • Outline Button Font: Choose the font style for text on outline buttons.
      • Solid Button Color: Select the background color of solid buttons.
      • Solid Button Font Color: Choose the font color for text on solid buttons.
      • Button Hover Color: Select the background color of buttons when hovered over.
      • Button Hover Font Color: Choose the font color for button text when hovered over.
    • Short URL and QR Code Generation:
      • Description: Generate short URLs and QR codes to facilitate easy access and sharing of the chatbot.
      • Generate QR Button: Clicking the “Generate QR” button displays a QR code associated with the chatbot.
      • Short Code Alias: Option to create or edit a short code alias for the generated QR code.
      • Generate Code Button: Clicking the “Generate Code” button displays a script to embed the web chatbot into any website.
      • Script Details: The generated script includes all necessary configurations to embed and initialize the chatbot.
    • Real-Time Preview:
      • Description: A preview section on the right side of the page allows users to see live changes as they customize.
      • Interactive Preview: Adjustments are immediately reflected in the preview, enabling real-time visualization.