Embed Blitzz Video Sessions on Your Website with the iFrame Widget
Add a floating video session button to your website, portal, or web application with the Blitzz iFrame Widget. This lightweight integration allows your team to launch video calls directly from any webpage—without leaving the site or switching browser tabs.
The iFrame widget is perfect for:
- Customer Support Portals: Enable agents to start video support sessions while viewing customer information
- Self-Service Websites: Let customers request video assistance with one click
- Field Service Applications: Give technicians instant access to video collaboration tools
- Internal Dashboards: Embed video session capabilities into CRM or ticketing systems
- Partner & Vendor Portals: Provide easy video communication options
How It Works
The widget adds a customizable floating button to your webpage. When clicked, it expands to reveal the full Blitzz session interface—allowing users to invite guests and start video calls without navigating away from your site.
Live Demo
See the widget in action: https://blitzz.co/iframe
Key Features
- Floating Button: Non-intrusive button that stays visible as users scroll
- Customizable Appearance: Match your brand with custom button text and colors
- No Page Reload: Widget expands inline without disrupting the user experience
- Full Functionality: Access all Blitzz features including SMS, email, and WhatsApp invites
- Responsive Design: Works on desktop and tablet browsers
Installation
Add the Blitzz iFrame widget to your website in two simple steps:
Step 1: Configure the Widget
Customize the button text and color to match your branding:
<script>
var config = {
title: "Start Video Session", // Button text - customize this
color: "#387bf7" // Button color - use your brand color
}
</script>Step 2: Add the Widget Code
Copy and paste the complete code snippet below just before the </body> tag on every page where you want the button to appear:
<script>
var config = {
title: "Start Video Session",
color: "#387bf7"
}
function f(){if(window.jQuery)loadfloating();else{var e=document.createElement("script");e.src="https://code.jquery.com/jquery-2.2.4.min.js",e.onload=function(){jQuery.noConflict(),loadfloating()},document.head.appendChild(e)}}function loadfloating(){jQuery(function(){var e={title:"Invite via Blitzz",color:"#3366cc"};"undefined"!=typeof config&&(config.title?e.title=config.title:e.title="Invite via Blitzz",config.color?e.color=config.color:e.color="#3366cc");var t=document.createElement("style");t.type="text/css",t.innerHTML+=".click-to-open{padding: 5px;position: fixed;bottom: 0px;right: 10px;background-color:"+e.color+";color: #ffffff;display: flex;justify-content: center;align-items: center;font-size: 16px;width: auto;height: 35px;overflow: hidden;box-shadow: 0 0 3px rgba(0 , 0 , 0, 1);border-radius: 4px;cursor: pointer;border: none;}.open-weblite-width{ opacity: 1; transition: opacity 0.5s; width: 400px;height: 630px;position: fixed;bottom: 50px;right: 15px;overflow:hidden;box-shadow:0 0 10px rgb(232, 232, 232);}.open-weblite-width.hide{opacity: 0}.click-to-open i {border: solid #F5F5F5; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;}.click-to-open .up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg);margin:0px 6px -2px 3px}.click-to-open .down { transform: rotate(45deg); -webkit-transform: rotate(45deg);display:none;margin:0px 6px 2px 3px}.inner-website-wdith{width:calc(100%);height:100%}.inner-website-wdith iframe{width:100%;height:100%}",document.getElementsByTagName("head")[0].appendChild(t);var i=document.createElement("div");i.innerHTML='<button type="button" class="click-to-open " id="click-to-open" onclick=toggleframe()><i class="arrow up"></i><i class="arrow down"></i><span>'+e.title+'</span></button><div class="open-weblite-width hide" id="open-weblite-width" ><div class="inner-website-wdith"><iframe id="iframefaq" src="https://web.blitzz.co/" width="100%" class="faqpage" frameBorder="0" scrolling="yes" marginwidth="0" marginheight="0"></iframe></div></div>',document.querySelector("body").appendChild(i)})}function toggleframe(){document.getElementById("click-to-open").classList.toggle("active");var e=document.getElementById("open-weblite-width");e.classList.contains("hide")?(e.classList.remove("hide"),document.getElementsByClassName("up")[0].style.display="none",document.getElementsByClassName("down")[0].style.display="block"):(e.classList.add("hide"),document.getElementsByClassName("up")[0].style.display="block",document.getElementsByClassName("down")[0].style.display="none")}f();
</script>Customization Options
| Option | Description | Example |
| title | Text displayed on the floating button | "Start Video Support""Virtual Inspection""Video Call" |
| color | Background color of the button (hex code) | "#387bf7" (blue)"#27AE60" (green)"#E74C3C" (red) |
Example Configurations
Customer Support (Blue):
var config = {
title: "Need Help? Start Video Chat",
color: "#3498DB"
}Field Service (Green):
var config = {
title: "Remote Assistance",
color: "#27AE60"
}Building Inspections (Orange):
var config = {
title: "Start Virtual Inspection",
color: "#E67E22"
}Authentication Requirements
The iFrame widget requires users to log in with their Blitzz credentials. For the best user experience, we recommend one of the following authentication options:
| Standard Login | Users enter their Blitzz email and password when first accessing the widget. Credentials can be saved for future sessions. |
| SSO / SAML | Integrate with your identity provider (Okta, Azure AD, Google Workspace, etc.) for seamless single sign-on. Users are automatically authenticated. |
| Token-Based Auth | Generate authentication tokens programmatically to log users in automatically. Ideal for embedded applications. |
Browser Compatibility
The Blitzz iFrame widget works on all modern browsers:
- Google Chrome (recommended)
- Microsoft Edge
- Mozilla Firefox
- Safari
Troubleshooting
Widget not appearing?
- Ensure the script is placed just before the closing
</body>tag - Check for JavaScript errors in your browser's developer console
- Verify there are no conflicts with other scripts on your page
Button styling issues?
- Make sure your color value is a valid hex code (e.g.,
#387bf7) - Check that your site's CSS isn't overriding the widget styles
Advanced Integration
For more control over the Blitzz integration, consider these additional options:
- URL Parameters Integration - Launch sessions with pre-filled data from your CRM
- REST API - Programmatically create and manage sessions
- Embedded API - Full control over the video experience in your application
Need Help?
Our team is ready to assist with your integration. For SSO setup, custom configurations, or any questions, please contact our support team.