How to integrate your interactive background to your website?

Nicolas Jacques
Sep 24 · 3 min read
Naker.Back is a free tool to create interactive backgrounds for your website or webapp

You are now super happy about your creation but you’re now only halfway to have a super cool website! If you don’t, go right now on Naker.back to create your own 👨‍🍳 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!

Webflow’s different blocks

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! 😋

Copy/paste in your text editor example

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! 🆒

Naker

Blog to make the web cool again!

Nicolas Jacques

Written by

Cofounder / COO of Naker

Naker

Naker

Blog to make the web cool again!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade