LogoLogo
  • Tuul 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
    • Tuul 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
  • Tuul 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 8 days 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., “Tuul 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.