Cool Tutorials

How to embed your interactive background on your website?

by Jen
4/2/2020

The integration to your website is quite simple, but with this quick step by step tutorial, we will make sure that you don’t have any trouble ⛑

🐣 First, pick where you want your background!

Your Naker.Background can be embedded anywhere on your website. As in any website, your page is made of blocks called containers/div/sections/etc, and you will have to decide on which of these blocks 🏗 your backgrounds will be. In CMS such as Wordpress, Wix.com or Webflow, you only drag and drop these blocks to set their positions.

According to what you’re using, you can use one of these 2 methods:

1. Add a custom HTML to your container 🎨

This is the simpler method and will work if you have the control on the HTML of your website, or if you’re using one classic CMS. First, define the size and the position (relative, absolute, fixed…) of your container. It’s better not to have a “static” position to be sure that the background is drawn correctly 👌

Then, if you are using a text editor, just copy-paste the script tag from Naker.Back tool inside this container. If you use a CMS you can add an embed HTML inside this container and just copy-paste the script in it. Woohoo! 😋

2. Give an ID to your container 🆔

This alternative could be useful if you use some custom Wordpress templates (like Divi) or if you only have access to the <head> of your page in your CMS. You will have to add a container like in the first option, but then to give it an ID (it’s kinda like a name 🎫) for example “background

You will have then to add the same ID to your export options in Naker.Back like this and copy-paste the updated script in the <head> of your page where you’d usually put the Google Analytics script. Thus our viewer will automatically get this specific container to draw the background.

And VOILA! 🙋

If you still have any trouble to do it, send us an SOS 🆘 on our support email: support@naker.io or chat with us from Naker.Back and we will help you. We’re a community, we help each other to make the web cool again! 🆒

Share