Customizing Widget Appearance

    Change colors, position, and display settings to match your brand.

    Make FOMOchat blend seamlessly with your website design.

    Position

    Choose where the widget appears:

    • Bottom Right — Most common, feels natural
    • Bottom Left — Alternative if right side is busy

    The widget floats in the corner and expands when clicked.

    Custom Positioning

    For precise control, use the data-pos embed parameter:

    s.dataset.pos = '-20,-20';  // 20px from bottom-right
s.dataset.pos = '20,20';    // 20px from top-left

    → Learn more about embed parameters

    Display Mode

    FOMOchat offers two display modes:

    Mode Description Best For
    Button (default) Floating chat bubble in corner Most websites, unobtrusive
    Input Inline input box on page Landing pages, embedded experiences

    Button Mode

    • Shows as a small chat bubble
    • Expands when clicked
    • Minimizes back to bubble

    Input Mode

    • Shows as an input field directly on the page
    • Chat appears above the input
    • More integrated, less popup-like

    Set display mode via embed code:

    s.dataset.show = 'input';

    Primary Color

    Set your brand color to customize:

    • Chat bubble background
    • Send button
    • Header accent
    • Interactive elements

    Enter a hex code (#3B82F6) or use the color picker.

    💡 Key Takeaway: Use your primary brand color for the widget. Consistent branding builds trust and makes the widget feel native to your site.

    Language

    FOMOchat supports 19 languages for AI-generated conversations:

    English, Spanish, French, German, Italian, Portuguese, Dutch, Polish, Russian, Japanese, Korean, Chinese (Simplified), Chinese (Traditional), Arabic, Hindi, Turkish, Vietnamese, Thai, Indonesian

    Setting Language

    Configure language in the Knowledge section:

    1. Open your FOMOchat editor
    2. Go to the Knowledge step
    3. Select your language from the dropdown

    What Language Affects

    • Generated participant names (culturally appropriate)
    • Conversation content and style
    • AI Rep responses to visitors
    • System messages and UI text

    💡 Pro Tip: For non-English deployments, also provide your website context/transcript in the target language for best results.

    Widget Size

    The widget automatically sizes for:

    • Desktop browsers (larger)
    • Tablets (medium)
    • Mobile phones (full-width when open)

    Chat Header

    Customize what appears at the top:

    • Your brand name or product name
    • Tagline or welcome message

    Visibility Rules

    Control when and where the widget shows:

    Page Rules

    • Show on all pages
    • Only specific pages (URL contains/matches)
    • Exclude specific pages

    Timing Rules

    • Show immediately
    • After X seconds
    • After scrolling X%

    Device Rules

    • Desktop only
    • Mobile only
    • All devices

    💡 Pro Tip: Start with the widget on high-intent pages only (pricing, product, checkout). This maximizes conversions while keeping visitor usage low.

    Preview Your Changes

    Use the Preview panel to see changes in real-time:

    1. Make adjustments in the editor
    2. Watch the preview update
    3. Test on different screen sizes
    4. Save when satisfied

    Best Practices

    1. Match your brand — Use your primary brand color
    2. Don't obstruct content — Check widget doesn't cover important elements
    3. Test on mobile — Ensure good mobile experience
    4. Consider visibility rules — Show at the right moments
    5. Choose the right display mode — Button for most sites, input for embedded feel

    Related Articles

    Was this article helpful?

    Your feedback helps us improve our documentation.