Installing the Widget on Your Website

    Learn how to add the FOMOchat widget to any website with a simple code snippet.

    Adding FOMOchat to your website takes just a few minutes.

    Getting Your Embed Code

    1. Open your FOMOchat from the dashboard
    2. Navigate to the Embed section
    3. Click Copy Code to copy the script

    Basic Installation

    Paste the code just before the closing </body> tag on your website:

    <script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://app.fomochat.com/widget.js?v=' + Date.now();
    s.async = true;
    s.dataset.fomochatId = 'YOUR_FOMOCHAT_ID';
    document.head.appendChild(s);
  })();
</script>

    The widget will automatically appear on your page.

    💡 Key Takeaway: The script must be placed before the closing </body> tag, not in the <head> section. This ensures the page loads first and the widget doesn't slow things down.

    Advanced Embed Parameters

    Customize the widget behavior with optional data attributes:

    Parameter Description Example
    data-fomochat-id (Required) Your unique FOMOchat ID s.dataset.fomochatId = 'abc123';
    data-name Pre-fill visitor's name s.dataset.name = 'John';
    data-email Pre-fill visitor's email s.dataset.email = 'john@example.com';
    data-has-video Wait for video before showing messages s.dataset.hasVideo = 'true';
    data-show Display mode: button or input s.dataset.show = 'input';
    data-pos Position offset x,y s.dataset.pos = '-20,-20';

    Pre-filling Visitor Information

    If you know your visitor's identity (from login, URL params, etc.), pass it to the widget:

    <script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://app.fomochat.com/widget.js?v=' + Date.now();
    s.async = true;
    s.dataset.fomochatId = 'YOUR_FOMOCHAT_ID';
    s.dataset.name = 'John Smith';
    s.dataset.email = 'john@example.com';
    document.head.appendChild(s);
  })();
</script>

    Video Mode Integration

    For pages with video, use data-has-video to sync the chat:

    s.dataset.hasVideo = 'true';

    This tells the widget to wait for a video element and sync messages to playback.

    Display Mode

    Choose how the widget appears:

    • button (default): Floating chat bubble in corner
    • input: Inline input box embedded in page
    s.dataset.show = 'input';

    Custom Positioning

    Override the default position with pixel offsets:

    s.dataset.pos = '-20,-20';  // 20px from bottom-right (default)
s.dataset.pos = '20,20';    // 20px from top-left
    • Positive values = from top/left
    • Negative values = from bottom/right

    → Learn more about advanced embed options

    Platform-Specific Instructions

    WordPress

    1. Go to Appearance → Theme Editor (or use a plugin like "Insert Headers and Footers")
    2. Find your theme's footer.php file
    3. Paste the code before </body>
    4. Save changes

    Shopify

    1. Go to Online Store → Themes → Edit Code
    2. Find theme.liquid in the Layout folder
    3. Paste the code before </body>
    4. Save

    Squarespace

    1. Go to Settings → Advanced → Code Injection
    2. Paste the code in the Footer section
    3. Save

    Wix

    1. Go to Settings → Custom Code
    2. Click Add Custom Code
    3. Paste the code and set placement to Body - End

    Webflow

    1. Go to Project Settings → Custom Code
    2. Paste in the Footer Code section
    3. Publish your site

    Verifying Installation

    After installing:

    1. Visit your website in a new browser window
    2. The chat widget should appear in the corner
    3. Check your FOMOchat dashboard to confirm it's receiving data

    💡 Pro Tip: Use incognito/private browsing mode to verify the widget appears correctly for first-time visitors.

    Troubleshooting

    Widget not showing?

    • Check that the code is before </body>
    • Verify your FOMOchat is active in the dashboard
    • Check visibility rules aren't hiding it
    • Clear your browser cache

    Need help? Contact support with your website URL and we'll help debug.

    Related Articles

    Was this article helpful?

    Your feedback helps us improve our documentation.