When a third-party service offers a way to embed a widget on your website, you can insert this widget into your popup with our JS callbacks feature.
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.
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
<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);(See Facebook documentation.)
Google Maps
Create an iframe block, with a URL similar to https://www.google.com/maps/embed?pb=...!2sfr
(See Google documentation.)
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&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);(See Instagram documentation.)
Create an iframe block, with a URL similar to https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:6652912089960640512
(See LinkedIn documentation.)
Spotify follow button
Create an iframe block, with a URL similar to https://open.spotify.com/follow/1/?uri=spotify:artist:6sFIWsNpZYqfjUpaCgueju&size=detail&theme=light
(See Spotify documentation.)
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);(See Twitter documentation.)