So you created your interactive background on Naker.Back and you are ready to implement it into your website and/or app.
You can embed it 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 where exactly you'd like to insert your background will be. In CMS such as Wordpress, Tilda or Webflow, you only drag and drop these blocks to set their positions.
Here the steps to follow:
Select the CMS you're using, if it's neither of them, choose then the "Custom script".
Add the URL link of your website.
Add either the ID of your container OR its class.
What is the ID and/or class?
Usually when you select the container where you'd like to insert your interactive background in your CMS, you can name its ID and/or class. Put a name and insert it directly in the field "ID" or "Class" of the export window.
Copy the script and paste it in the header or body tag of your website.
Note: You can anytime remove our Watermark by switching on/off the button. If you remove our Watermark, please don't hesitate to share the ❤️ with your colleagues and friends. It would meant so much for us 🙏
The process of ID/Class might be different depending on the CMS you're using.
Check here what might change following the CMS you use:
Wix: https://support.wix.com/en/article/embedding-custom-code-to-your-site
Squarespace: https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScriptyour-site#adding-html-content
Divi, Elementor or Gutenberg: http://cakewp.com/divi-tutorials/how-to-add-interactive-particles-background/?fbclid=IwAR3DBR9F3vlqN8GHuIsATxVOS4Oog599GWH8sJuC2-fDg6vxGfTmvOws9U0
Tilda:
When you're in the editor of your Tilda website, select the container or part of your website where you'd like to integrate your Naker content and hit "settings".
You'll have a left menu and if you scroll down, you'll find the Block ID of the selected container. Copy this Block ID name.
Go back to your Naker background and after hitting the export button, paste the Block ID in the "Node ID container" and copy the script.
Go back to your Tilda website editor. At the upper-right corner, access the Page settings > Additional.
Scroll down until you find "Html Code For Head-Zone" , hit "edit code" and paste the script in the window which appears.
Publish and check the result!
Webflow:
After hitting the export button in Naker, add in the "Node ID Container" field, the name you'd like. Afterwards, copy the script.
Go to your Webflow editor and select the section/block where you'd like to integrate your Naker background Afterwards, hit "settings" in your right menu and put the ID name, you've inserted in the Naker's export window, in the ID field.
Go to your left menu in Webflow and hit "Pages", select the page where you'd like to display your Naker background and go to the settings of this specific page.
Scroll down in this page settings until you arrive at the section called "Custom Code" > Inside <head> tag and paste the script you've copied from Naker's export window.
Save and Publish!
Unbounce:
When you're in the editor of your Unbounce website, select the container or part of your website where you'd like to integrate your Naker background, go to the "properties" in your right menu and scroll down until you find the "Element Metadata" and get the ID .
Go back to your Naker background and add the Block ID in the "Node ID container".
Go back to Unbounce and hit "Javascripts" at the bottom of your page. A window will appear and paste the Naker's script.
Go back to the section where you integrated your interactive background. Be sure that the opacity of the section is 0% ( so transparent) and tick the box "stretch background to page edges", hence, your background will be adapted to any size of screen.
Save and Preview!
Bubble:
After following the 3 main steps hereabove.
Go to your Bubble app and paste the script in the Page HTML Header.
Carrd:
Depending on where you'd like to add your interactive content (fullscreen or in a specific section of your website).
Add just an embed section, if you'd like to display your interactive content on your whole website.
Add a container and an embed section, if you'd like to display your interactive content in a specific part of your website.
Go back to your Naker tool and open the export window. You will need to name your ID Node Container.
In case you'd like to display your interactive content on your whole website, the class section is pre-defined and called "is-loading". So, insert ".is-loading" (don't forget the dot in the beginning).
In case you'd like to display your interactive content in a specific container, give any name you want.
In any case, select the embed section in your Carrd website, and paste the Naker script in the Code section. If you have in addition, a container, select this container and add the name of your ID.
Save and Publish!
Wordpress:
Install "headers and footers" plug-in via https://wordpress.org/plugins/insert-headers-and-footers/
After creating your interactive content in Naker and inserting the ID container. Copy/paste the script in the section "headers and footers" of your Wordpress website.
Shopify:
You either have an additional framework which allows to embed the Naker code or you'll need to install a plug-in to be able to integrate some custom code in your website.
For the plug-ins, you have 2 main options:
Add head code: https://apps.shopify.com/add-head-code?locale=fr
or Code Customizer: https://apps.shopify.com/code-customizer
Iframe integration?
We wouldn't advice to apply this solution since you won't live the full experience properly.
Otherwise, copy/paste the link of your project, which you can access when you're in your dashboard.
- Hover your project, that way, you'll see a button "share" appearing at the bottom of your thumbnail
- Hit the button and choose "Copy URL". Afterwards, you'll be able to directly paste this link in the adequate field of your website which allows iframe embed.
What If I built my own website?
If you've built your own website without any third party services here above, you can refer to this Naker.documentation: https://doc.naker.io/Back/Framework.html
