Webnode
Install the Yaplet chat widget on a Webnode website through Webnode's website header HTML setting. Needs a Standard, Profi or Business premium plan.
Overview
Webnode has a setting for adding HTML code to the header of every page of a website. Pasting the Yaplet code there, wrapped in <script> tags, and publishing puts the chat widget on the whole site.
Installation Steps
Copy your Yaplet code
In your Yaplet dashboard, go to Brand → Chat widget and open the Install tab. If the tab asks where your website runs, choose Other website. Copy the code with the copy button on the code block.
Webnode's header field expects HTML, so the code must sit between a <script> line and a </script> line. With Other website chosen, the code already has these lines. If the tab didn't ask, the code is plain JavaScript that starts with !function (Yaplet, and you add the lines when you paste it.
Open the header code setting
In the Webnode editor, click Settings in the top bar, go to Website Settings, and open Website header and footer with the small arrow next to it.
Paste the code
Click into the Website header HTML code field. If it already holds other code, keep it and add the Yaplet code below it.
Paste the code on a new line. It must start with a <script> line and end with a </script> line; if what you copied starts with !function (Yaplet instead, type <script> on a new line before it and </script> on a new line after it. Click Save.
Publish your changes
Click Publish in the top-right corner of the editor. Saving the setting alone doesn't change the live site; publishing does, right away.
Check your site
Open your website in a new browser tab and reload it. The Yaplet chat button appears in the bottom-right corner. Click it to check that the chat opens.
Troubleshooting
- You saved but didn't publish — click Publish in the editor.
- The code shows up as text on the site's pages — the
<script>tags are missing. Add them as described above, save and publish. - The chat appears on one page only — the code went into one page's own header field (Pages → the page's SEO settings → Custom HTML header code). Remove it there and paste it into Website header HTML code instead.
- The website is on the free plan, Limited or Mini — header code needs a Standard, Profi or Business premium plan.
- The browser shows an old copy of the page — reload, or open the site in a private window.