How to embed the Instagram Engagement Rate Calculator widget on your website

To help you achieve your affiliate goals, you can embed the Instagram Engagement Rate Calculator on your website and promote it to your audience. This calculator provides valuable data and insights to your users, helping them to make informed decisions about their influencer marketing and social media activity.

To embed the calculator, you’ll need to insert a HypeAuditor widget code.

How to embed the HypeAuditor widget on your website

In order to use the Instagram Engagement Rate Calculator widget on your website, you'll need to follow these steps:

Open the HTML code for your webpage (to do this, you’ll need to access the source code using a code editor or CMS).
Find the closing </body> tag — usually, it’s located closer to the bottom of the page.
Copy the following code (it’s the main script code) and paste it right before the </body> tag and save the changes.
```
<script async src="//libs.hypeauditor.com/freetoolswidget/latest/index.js"></script>
```

4. Find the closing </head> tag — it is typically located closer to the top of the page, right before the opening <body> tag. Copy the following code from here:

<link rel="stylesheet" href="<https://libs.hypeauditor.com/freetoolswidget/latest/style.css>">

and paste it right before the </head> tag and save the changes.

5. Next, add this code snippet somewhere in between the opening <body> and closing </body> tags:

<script>
    window.hypeWidget =
      window.hypeWidget ||
      function () {
        ;(hypeWidget.q = hypeWidget.q || []).push(arguments)
      }
</script>

⚠️ Note that it's important to place this code snippet as high in the page's code as possible.

Displaying Widget

Now that you've added all the necessary scripts to your website, you can display widgets. Here's how:

Add a block to your webpage where you want the widget to appear. You can use the following example:
```
<div id="hype-widget-block"></div>
```

⚠️ Note that "widget-block" is just an example id — you can use it or choose your own id name but note that it should be identical to the nodeId you’ll use further.

2. Add this code that will make the widget work:

<script>
  hypeWidget('show', {
    widgetName: 'IgErCalculator',
    nodeId: '#hype-widget-block',
lang: 'en',
    options: {
      title: 'Instagram Engagement Rate Calculator',
      description: 'Try our free Engagement Rate Calculator to find out the engagement of any Instagram account',
      source: 'your_affiliate_source',
marker: ''
    }
  })
</script>

Here’s a set of variable parameters you can modify to customize your widget:

nodeId: the name of the block with your widget — it must be identical to the <div> id you specified in step 1
lang: the language of the text. This is used to translate phrases that cannot be set with the widget parameters. Available values include:
1. en
2. es
3. de
4. fr
title - here you can specify the title of the widget
description - you can change the description and insert your own text
source: here, you’ll need to paste the part of your affiliate link that goes after “source=”.
marker: with this variable, you can label different traffic channels and sources at your discretion