How to add a custom iFrame/HTML channel to your widget

In this guide we’ll show you how to add a custom IFrame/HTML to your Sticky Floting Contact Form widget.

You can do this to display an embed YouTube video or a custom image, for example a Google Maps iFrame or a QR code through your widget. You can use this custom channel to show any embedded content with IFrame or any custom HTML code.

Tip: you can read in detail how to show a QR code in your widget here: https://premio.io/help/mystickyelements/how-to-add-a-qr-code-to-your-my-sticky-elements-widget/ – the guide is for the WordPress version of the app, however it’s fully relevant for Shopify as well.

So let’s dive in. First, open the Sticky Floating Contact Form app in your Shopify admin panel. The app settings menu will open up. Scroll down to the ”Social channels tab” and make sure you activate it by toggling the button:

Then, click to add a custom HTML/iFrame channel:

In the field that will open, enter your custom iFrame/HTML code.

To further personalise your new custom channel, select whether you want it to be displayed on desktop or mobile devices, or both. You can then customize the channel appearance by uploading a custom icon or choosing one from the Font Awesome directory. If you select an icon from the Font Awesome directory, you can change its background colour and colour. You can also add an icon text (the text that will appear under the icon in the Sticky Floating Contact Form widget) as well as your icon text size.

If you want to embed a YouTube video, open the video on YouTube, click on ”Share” > ”Embed”. You can even select what second/ minute from the video you want your embed video to begin at. Then, simply copy the code and paste it in the ”Enter your custom iFrame/HTML code” field in the Sticky Floating Contact Form app settings.

In the end, depending on your settings and personalisation, your widget may look something like this: 

If you want to embed a Google Maps location, for example your business location, go to your address on Google Maps, click on ”Share” > ”Embed a map” (you can even choose the embedded map size). Then, simply copy the code and paste it in the ”Enter your custom iFrame/HTML code” field in the Sticky Floating Contact Form app settings.

In the end, depending on your settings and personalisation, your widget may look something like this: 

If you want to embed a custom image, for example a photo or a QR code, paste this code in the ”Enter your custom iFrame/HTML code” field in the Sticky Floating Contact Form app settings, making sure you add your link address in place of (add your link here). You can of course change the width and height according to your preferences.

If you also want to add a text, you need to add this code between the HTML and BODY tags in the code above. Just make sure you add your text in place of (your text here):

 

(your text here)

 

In the end, it should look something like this:

 

your text here

In the end, depending on your settings and personalisation, your widget may look something like this: 

You can also embed media, for example, the latest news on a subject. To do that, copy a link to an article/piece of news you want to embed and paste it here: https://iframely.com/embed. Then, simply copy the code you’ll get and paste it in the ”Enter your custom iFrame/HTML code” field in the Sticky Floating Contact Form app settings.

In the end, depending on your settings and personalisation, your widget may look something like this: 

When you’re done, don’t forget to click on ”Publish” at the bottom of the page. That’s it! Easy as 1,2,3 ☺️

Still have questions? Ping us at our Facebook group, and we’d love to help out!