Setting Up SMOC Flow with iFrame and Tracking

This guide shows you how to embed a SMOC conversational flow on your website using an iFrame, along with proper tracking pixel setup and UTM parameter handling.

Overview

To successfully integrate a SMOC flow on your website, you'll need to implement three main components:

iFrame code - Embeds the conversational flow on your page

Tracking pixels - Meta (Facebook) and Google tracking codes

Header script - Passes UTM parameters from your page to the iFrame. Card flows embed `/cards?iframe_mode=true` so the iframe shows the card alone; the hosted `/cards` page keeps any text and design above, beside, or below.

For general guidance and FAQs, visit: https://www.smoc.ai/faq

1. iFrame Implementation

The iFrame code embeds your SMOC flow directly on your webpage. You have two setup options depending on your needs.

Fixed Dimensions Setup

Use this approach when you want specific pixel dimensions. The iFrame will maintain these exact measurements:

 <iframe  width="440"  id="smoc_iframe"  height="600"  name="code"  allowtransparency  src="https://go.smoc.ai/dummy_company/Flow/flow-name?iframe_mode=true"  style="border: none; overflow: hidden;"  loading="lazy"> </iframe> 

Dynamic Dimensions Setup

Use this approach when you want the iFrame to fill its parent container. Place this iFrame inside a parent <div> with the appropriate dimensions:

 <iframe 
  width="100%" 
  id="smoc_iframe" 
  height="100%" 
  name="code" 
  allowtransparency 
  src="https://go.smoc.ai/dummy_company/Flow/flow-name?iframe_mode=true" 
  style="border: none; overflow: hidden;" 
  loading="lazy">
</iframe> 

Important Placement Considerations

When placing the iFrame on your page, ensure that:

On mobile devices, customers don't need to scroll to see the flow
The iFrame is positioned prominently and is immediately visible
You adjust height and width either directly in the code or make it responsive using the dynamic setup

2. Tracking Pixels Setup

Tracking pixels from Meta (Facebook) and Google can be obtained from your marketing agency or accessed directly from your Meta Business Manager and Google Ads accounts. These codes should be placed in the <head> section of your webpage.

Meta Pixel Code

The Meta pixel tracks user interactions for Facebook advertising. Replace the pixel ID with your own:

 <!-- Meta Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s) {
    if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_META_PIXEL_ID');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=YOUR_META_PIXEL_ID&ev=PageView&noscript=1" />
</noscript>
<!-- End Meta Pixel Code --> 

Google Pixel Code

The Google pixel tracks conversions for Google Ads. Replace the tracking ID with your own:

html

 <!-- Google Pixel Code -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-XXXXXXXXXX');
</script>
<!-- End Google Pixel Code --> 

Note: Replace YOUR_META_PIXEL_ID and AW-XXXXXXXXXX with your actual tracking IDs from your Meta Business Manager and Google Ads accounts, or obtain them from your marketing agency.

3. UTM Parameter Propagation via smoc.js

To simplify integration and ensure consistent tracking, SMOC now provides a standard JavaScript helper script.

How it works

On page load, the script finds all <iframe> elements whose src begins with https://go.smoc.ai or https://go2.smoc.ai.
It appends any missing UTM parameters (utm_source, utm_medium, utm_campaign, utm_term, utm_content) from the current page URL to the iframe src.
If the iframe already has any UTM parameters, they are preserved.

To use:

Include the following script once in the <head> section of your page:

<script src="https://go.smoc.ai/smoc.js" defer></script>

Ensure your iframe uses a src pointing to https://go.smoc.ai or https://go2.smoc.ai.Visit the page with UTM parameters in the URL. The iframe src will automatically include them.

Limitations

The script only runs once on DOMContentLoaded. If your site injects SMOC iframes dynamically after page load, contact SMOC support to enable a dynamic variant.
Ensure your CSP (Content Security Policy) allows loading and framing from go.smoc.ai or go2.smoc.ai.

4. Forward UTMs to outbound Link Messages

smoc.js gets campaign parameters onto the flow. To pass those same parameters on to a shop or partner URL, open the Link Message (or Open Graph link) in Studio and enable Forward UTM & click IDs. The destination then receives incoming utm_* keys plus ad click IDs (gclid, fbclid, msclkid, ttclid, wbraid, gbraid). Parameters already on the destination URL are kept. The toggle is off by default.

Details: Embedding web flows and passing UTMs.

Complete Implementation Example

Here's how all components work together in the <head> and <body> sections:

 <!DOCTYPE html>
<html>
<head>

  <!-- Meta Pixel Code -->
  <script>
    !function(f,b,e,v,n,t,s) {
      if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', 'YOUR_META_PIXEL_ID');
    fbq('track', 'PageView');
  </script>
  <noscript>
    <img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=YOUR_META_PIXEL_ID&ev=PageView&noscript=1" />
  </noscript>
  <!-- End Meta Pixel Code -->
  
  <!-- Google Pixel Code -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'AW-XXXXXXXXXX');
  </script>
  <!-- End Google Pixel Code -->
  
  <!-- UTM Parameter Handler -->
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const iframe = document.getElementById("smoc_iframe");
      const urlParams = new URLSearchParams(window.location.search);
      const utmParams = [
        'utm_source',
        'utm_medium',
        'utm_campaign',
        'utm_term',
        'utm_content'
      ];
      
      const utmQueryString = utmParams
        .map(param => urlParams.get(param) ? `${param}=${urlParams.get(param)}` : '')
        .filter(param => param)
        .join('&');
      
      if (utmQueryString) {
        console.log('adding', utmQueryString)
        iframe.src += (iframe.src.includes('?') ? '&' : '?') + utmQueryString;
      }
    });
  </script>

  <script src="https://YOUR_DOMAIN/smoc.js" defer></script>
</head>
<body>
  <!-- Your page content -->
  
  <!-- SMOC Flow iFrame -->
  <iframe 
    width="440" 
    id="smoc_iframe" 
    height="600" 
    name="code" 
    allowtransparency 
    src="https://go.smoc.ai/dummy_company/Flow/flow-name?iframe_mode=true" 
    style="border: none; overflow: hidden;" 
    loading="lazy">
  </iframe>
  
  <!-- More page content -->
</body>
</html> 

Summary

To successfully integrate SMOC on your website:

Add the iFrame code where you want the flow to appear (fixed or dynamic sizing)

Get tracking pixels from your marketing agency or your accounts and add them to the <head> section

Add the SMOC JavaScript file (<script src="https://YOUR_DOMAIN/smoc.js" defer></script>) to the <head> section. It will automatically propagate UTM parameters to all SMOC iframes on page load.

For additional questions or support, visit https://www.smoc.ai/faq or contact your SMOC representative.

Where AI runs

AI does the work. You review it.

Website chat, card flows, and LinkedIn share one system. AI does each job below. The line under the title says where that job runs.

AI reads the company

Every agent

AI crawls the site and writes the offer, the audience, the voice, and the brand. Website chat, card flows, and LinkedIn start from that.

AI drafts the agent

Every agent · theme on web · list on LinkedIn

AI writes the flow. Theme runs on website chat and cards. Translation runs on every agent. AI finds the prospect list on LinkedIn.

AI runs the conversation

Path on every flow · web and LinkedIn split

Reinforcement learning on the flow path runs on every agent. Recommendations run on web. Right timing and reply reading run on LinkedIn.

AI gets better

Every agent

AI proposes a variant, uses your review on the next draft, and starts from an example that already works. You apply the change.

Stay close to the shift in AI sales

Get product updates and perspective on proactive AI agents, multichannel orchestration, and conversion—without the noise.

Weekly signal on proactive AI sales

Join the newsletter