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.
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.)
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,
});
};(See Calendly documentation.)