Advanced Embed Options

Customize your FOMOchat widget behavior using embed code parameters.

Embed Code Structure

The FOMOchat embed code dynamically creates a script with configurable data attributes:

<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';
    // Add optional parameters here
    document.head.appendChild(s);
  })();
</script>

Parameter Reference

Parameter	Required	Description	Example Value
`data-fomochat-id`	Yes	Your unique FOMOchat identifier	`'abc123-def456'`
`data-name`	No	Pre-fill visitor's name	`'John Smith'`
`data-email`	No	Pre-fill visitor's email	`'john@example.com'`
`data-has-video`	No	Enable video sync mode	`'true'`
`data-show`	No	Display mode	`'button'` or `'input'`
`data-pos`	No	Position offset (x,y)	`'-20,-20'`

Pre-filling Visitor Information

If you know your visitor's identity from your application (login, URL parameters, CRM data), pass it to FOMOchat:

Pre-fill Name

s.dataset.name = 'John Smith';

Use cases:

Logged-in users
Users from email links with name in URL
CRM-integrated landing pages

Pre-fill Email

s.dataset.email = 'john@example.com';

Use cases:

Post-login experiences
Email campaign landing pages
Known leads returning to site

Combined Example

<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>

💡 Pro Tip: Pre-filling info creates a personalized experience and saves the visitor from re-entering their details.

Video Mode Integration

Enable video synchronization for webinar/course pages:

s.dataset.hasVideo = 'true';

What this does:

Widget scans page for video elements
Syncs chat messages to video playback time
Pauses chat when video pauses
Catches up when viewer seeks

Supported video players:

YouTube embedded players
Vimeo embeds
Wistia players
Native HTML5 <video> elements

Display Modes

Button Mode (Default)

s.dataset.show = 'button';

Floating chat bubble in corner
Expands on click
Minimizes back to bubble
Best for: Most websites

Input Mode

s.dataset.show = 'input';

Inline input box on page
Chat appears above input
More integrated experience
Best for: Landing pages, embedded chat experiences

Custom Positioning

Override the default corner position:

s.dataset.pos = 'x,y';

Position Values

Positive values = from top-left corner
Negative values = from bottom-right corner

Examples

Value	Position
`'-20,-20'`	20px from bottom-right (default)
`'20,20'`	20px from top-left
`'-20,20'`	20px from right, 20px from top
`'20,-20'`	20px from left, 20px from bottom

Use Cases

Avoid overlapping with other widgets
Match specific design requirements
Position near related content

Dynamic Parameter Setting

For single-page apps or dynamic pages, set parameters via JavaScript:

// After page determines user identity
const script = document.querySelector('script[data-fomochat-id]');
if (script) {
  script.dataset.name = currentUser.name;
  script.dataset.email = currentUser.email;
}

Complete Example

<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://app.fomochat.com/widget.js?v=' + Date.now();
    s.async = true;
    
    // Required
    s.dataset.fomochatId = 'abc123-def456-ghi789';
    
    // Optional: Pre-fill visitor info
    s.dataset.name = 'John Smith';
    s.dataset.email = 'john@example.com';
    
    // Optional: Video sync
    s.dataset.hasVideo = 'true';
    
    // Optional: Display as inline input
    s.dataset.show = 'input';
    
    // Optional: Custom position (20px from bottom-left)
    s.dataset.pos = '20,-20';
    
    document.head.appendChild(s);
  })();
</script>