Adding Elfsight widget to Hostinger website

Ready to install your Elfsight widget on Hostinger? We’ve got you covered! Since Hostinger requires a custom code approach, you’ll need your widget ID handy. If you’re unsure where to find it, this guide can help: Where to get your widget ID. Now, copy that code, and let's begin!

Add any widget to a specific page

1

Log in to your Hostinger control panel, go to the Websites tab, and click Edit website next to the website where you'd like to add the widget:

2

In the Website Builder, open the Add elements panel on the left, then drag and drop the Embed code element to where you want it on your page:

3

Click "Your custom embed code" and hit Enter code:

4

Insert the following code into the window, replacing WIDGET_ID with the ID of your widget:

<script src="https://custom-scripts.elfsightcdn.com/public-scripts/hostinger-and-go-daddy/install-widget.js" data-banner></script>
<div class="elfsight-app-WIDGET_ID"></div>
	

Here's an example of the final code:

<script src="https://custom-scripts.elfsightcdn.com/public-scripts/hostinger-and-go-daddy/install-widget.js" data-banner></script>
<div class="elfsight-app-c0665a39-b885-404b-8141-233bc051f3f6"></div>
	

Then click the Embed code button:

Hostinger doesn’t support widget display in editor or preview mode, so you’ll see a banner placeholder instead. Don’t worry—your widget will be fully visible on the published site!

5

Click Save and Update your website:

Awesome! Your widget has been added to the page just as you wanted.

Stuck with installation? Let us help! 🙌 Send us a quick request, and we’ll handle the setup for you.

Add any widget to all pages

1

After logging into the Hostinger control panel, go to the Websites tab, find your site, and click Edit website:

2

In the Website Builder, find More settings, and open Integrations:

3

Paste the following script into the Custom code field, replacing WIDGET_ID with your widget ID:

<script>
  (() => {
    const WIDGET = 'elfsight-app-WIDGET_ID';
    function installPlatform() {
      const platform = document.createElement('script');
      platform.src = 'https://static.elfsight.com/platform/platform.js';
      platform.async = true;
      document.head.appendChild(platform);
    }
    function installWidget() {
      const widget = document.createElement('div');
      widget.classList.add(WIDGET);
      document.body.prepend(widget);
      installPlatform();
    }
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', installWidget);
    } else {
      installWidget();
    }
  })();
</script>
	

Here's an example of the final code:

<script>
  (() => {
    const WIDGET = 'elfsight-app-04a03212-0e9f-4892-a3ae-142d6069c77b';
    function installPlatform() {
      const platform = document.createElement('script');
      platform.src = 'https://static.elfsight.com/platform/platform.js';
      platform.async = true;
      document.head.appendChild(platform);
    }
    function installWidget() {
      const widget = document.createElement('div');
      widget.classList.add(WIDGET);
      document.body.prepend(widget);
      installPlatform();
    }
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', installWidget);
    } else {
      installWidget();
    }
  })();
</script>
	

Once you have added the code, click Save changes:

4

Then hit Update website to publish the widget:

Hostinger doesn’t support widget display in editor or preview mode. Don’t worry—your widget will be fully visible on the published site!

Well done! Your widget has been successfully added to all pages of your website.

Stuck with installation? Let us help! 🙌 Send us a quick request, and we’ll handle the setup for you.