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
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.
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.
Related Guides
Continue learning with these related guides
