ON Documentation
  • ON Documentation
  • Create a New Bot
  • Publish
  • Automations
    • Basic Response
    • Permuted Response
    • Generative AI Response
    • Tutorial Response
    • Forms & Surveys
      • Lead Qualification Form
      • Live Chat Request Form
      • Feedback Survey
      • Post Event Survey
    • Ticketmaster In-chat Purchase
    • YouTube
  • Integrations
    • Google Analytics
    • Gorgias
    • Hubspot
    • Salesforce
    • Shopify Storefront
      • Step 1: Application Setup & Storefront API Access
      • Step 2: In-Chat Order Updates
    • Ticketmaster
    • YouTube
  • Bot Settings
    • Web App Appearance
    • Advanced Settings
    • Version History
  • Deployment Channels
    • ON Web Chat Client
    • Discord
    • Facebook Messenger
  • Broadcast Messages
  • Live Chat
  • Analytics
    • Forms & Surveys Analytics
    • Live Chat Analytics
  • Administration
    • Organizations
    • Manage Members
    • Set Presence
    • Notifications
    • Login Methods
  • ON Portal
Powered by GitBook
On this page
  • Overview
  • Configurations
  • Brand
  • Display
  • Text
  • Typing Area
  • Launcher Button
  1. Bot Settings

Web App Appearance

Tailor the chat experience to match your brand.

PreviousBot SettingsNextAdvanced Settings

Last updated 10 months ago

Overview

Our Web App offers extensive customization options, allowing businesses to tailor the chat interface to align seamlessly with their brand identity, thereby providing a consistent and engaging user experience across both mobile and web platforms. Users can make a range of visual and functional adjustments to ensure a personalized interaction that complements their brand's aesthetic and functional requirements.

Configurations

To customize your Web App and mobile branding through the Portal, the following options are available:

Brand

  • Logo: Upload your brand’s logo to establish visual identity.

  • Name: Set the chatbot’s name, e.g., “ON Product Demo,” to reflect your brand.

  • Brand Color: Choose a primary brand color to enhance brand recognition.

Display

  • Supporting Color: Select a supporting color to complement the primary brand color.

  • Styling Options: Access multiple choices for refining the visual style of your chat interface.

  • Corner Style: Choose between different corner styles to match your brand’s design language.

Text

  • Font Family: Select from various font families to maintain typographic consistency.

  • Text Cases: Set text cases for link titles, button texts, and quick action texts to ensure clarity and brand alignment.

Typing Area

  • Styling Options: Personalize the typing area with various styling choices.

  • Placeholder Text: Customize the placeholder text in the typing area to guide user interactions.

Launcher Button

  • Button Shape: Choose from multiple shapes for the launch button to match your brand’s style.

  • Button Size: Adjust the size of the button to ensure it fits well within the overall design.

  • Launch and Close Images: Optionally, add custom images for the open and close states of the chat interface. Support for dynamic animations using Lottie files can be included here if applicable.

Lottie files are JSON-based animation files that are designed to work across platforms, including web and mobile. They are vector-based and can scale without pixelation, making them smaller in file size than other animation formats like GIF or MP4 while still retaining quality.

These configurations enable businesses to design a chat experience that not only resonates with their brand but also significantly enhances user engagement and satisfaction across different devices.