How to Embed a Live Chat Widget in a Web Page IFrame

Sometimes, it's useful to embed a live chat widget right inside a web page without the need to click a button or link to open it.  This way someone can start a chat immediately on your website say in a contact form or in your homepage.

Here's how to create your embedded live chat widget in an iframe:

1.  Create your Live Chat Standalone URL

You can create a standalone chat url to add live chat to any link, email signature, or social media post.  In this case we're creating the url to use in an iframe in a web page.

In your account, go to Apps --> Live Chat, then Edit Settings (if you're using Microsoft Teams, see below).  You'll see a Standalone Chat URL field.  Input a name for your shortcut and we'll generate your standalone url.  

For example here's our url: https://chat.socialintents.com/c/livechatsi

You can adjust the width and height of the embedded iframe by including 2 parameters in the url:  widget and height.  Use numbers for the values like this example:

https://chat.socialintents.com/c/livechatsi?width=600&height=600

The page is responsive, so if the enclosing frame is smaller, the chat will just take up the entire space as needed.

For Microsoft Teams:

For Microsoft Teams, go to your Live Chat Setting from the left sidebar in Teams ( once you've added our live chat app to teams).  Scroll down until your see the Standalone Chat URL.  The first time you go here, you will choose a unique short name for your live chat.  Once saved, we'll great your chat URL using this name.

In our case, you see that our standalone URL is: https://chat.socialintents.com/c/teamslivechat

2. Add an iframe reference to your standalone url in your webpage

Next, you can add an iframe that points to your standalone chat URL in your web page html.

Your iframe code will look something like this (make sure to use your shortcut you created above):

<iframe src="https://chat.socialintents.com/c/yoururl" width="480" height="540" frameborder="0"></iframe>

3. Publish your web page

Now you have an embedded live chat widget on your website!

Here's what our chat widget looks like when it's embedded in an iframe on our website: