Skip to main content

Insert social widgets into your campaigns

A third-party service allows you to embed a widget on your website, which you can add to your popup using our JS callbacks feature.

Updated today

Let's first see the generic methods to follow. You will then find various examples for embedding well known services.

Use iframe blocks for <iframe> snippets

First, if the provided snippet starts with <iframe>, you just need to use an iframe block:


Within our editor, create a new iframe block, and fill up its URL by copying the src attribute of the provided snippet.

For example, if you want to embed a Google map, you will get an HTML snippet similar to this:

<iframe src="https://www.google.com/maps/embed?pb=...!2sfr" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

The URL of the iframe block should be https://www.google.com/maps/embed?pb=...!2sfr

That's it! Note that we have dedicated blocks for videos (YouTube, Dailymotion, Vimeo) and Facebook pages.

Create JS callbacks to execute scripts

Some other widgets need a deeper integration with the page. Such widgets are composed like this: a <div> element and a <script> tag.

The <div> aims to place the future widget. It is a target, an empty element that will later be filled by the <script>. You need to separate these two concepts in Wisepops.

Create an HTML block containing the <div>

You can choose the position of the widget in your popup by creating an HTML block. It should only contain the <div ... </div> portion of the snippet.

For example, if we want to embed a YouTube subscribe button, we would create an HTML block containing the following code:

Create a JS callback to execute the script

<script> tags are not allowed in our HTML blocks. You need to use a JS callback instead. Create a callback, and set its event to Before popup display.

Now, you should fill up the callback script. The expected language is JavaScript, not HTML. This means that you cannot use <script> tags. This implies changing the way the script is written.

For our YouTube subscribe button example, we would transform the script provided by YouTube:

<script src="https://apis.google.com/js/platform.js"></script>

Into a pure JavaScript snippet. We must point the YouTube script where to find the subscribe button; otherwise, the script won't be able to locate the element within a campaign:

const script = document.createElement('script');
script.src = "https://apis.google.com/js/platform.js?onload=initWisepopsYtSubscribe";
document.body.append(script);

window.initWisepopsYtSubscribe = () => {
const buttonElement = event.target.querySelector('.g-ytsubscribe');
const options = {
'channel': buttonElement.getAttribute('data-channel'),
'layout': buttonElement.getAttribute('data-layout'),
'count': buttonElement.getAttribute('data-count'),
};

gapi.ytsubscribe.render(buttonElement, options);
}

Note that the script.src value is aligned with the original <script src="..."> attribute.

Open JS callback and select Before popup display event


Real examples

Facebook post

Create an HTML block containing the <div> with the class fb-post. Something like this:

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-show-text="true" data-width="">
<blockquote cite="https://developers.facebook.com/20531316728/posts/10154009990506729/" class="fb-xfbml-parse-ignore">
Posted by <a href="https://www.facebook.com/facebookapp/">Facebook App</a> on&nbsp;
<a href="https://developers.facebook.com/20531316728/posts/10154009990506729/">Thursday, August 27, 2015</a>
</blockquote>
</div>

And create a JS callback with a script similar to this:

var script = document.createElement("script");
script.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0";
script.async = true;
document.body.appendChild(script);

Google Maps

Create an iframe block, with a URL similar to https://www.google.com/maps/embed?pb=...!2sfr

Instagram post

Create an HTML block containing the <blockquote> element. Something like this:

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/CADdxE1gJ1u/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
...</blockquote>

And create a JS callback with a script similar to this:

var script = document.createElement("script");
script.src = "//www.instagram.com/embed.js";
script.async = true;
document.body.appendChild(script);

LinkedIn

Spotify follow button

Twitter

Create an HTML block containing the <a> element with a class starting with twitter. Something like this:

<a class="twitter-timeline" href="https://twitter.com/Twitter?ref_src=twsrc%5Etfw">Tweets by Twitter</a>

And create a JS callback with a script similar to this:

var script = document.createElement("script");
script.src = "https://platform.twitter.com/widgets.js";
script.async = true;
document.body.appendChild(script);

Calendly

Create an HTML block containing the <div> element with the class calendly-inline-widget, like this:

<div class="calendly-inline-widget" data-url="https://calendly.com/your-calendly-url" style="height:700px;"></div>

And create a JS callback with a script similar to this:

const container = event.target.querySelector('.calendly-inline-widget');

var script = document.createElement("script");
script.src = "https://assets.calendly.com/assets/external/widget.js";
document.body.appendChild(script);

script.onload = function () {
Calendly.initInlineWidget({
url: container.dataset.url,
parentElement: container,
});
};
Did this answer your question?