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 over a week ago

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 of all, 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);


Did this answer your question?