How to Integrate InternalLinking.io on Your Site with JavaScript or Server-side Integration

Automating Internal Linking with InternalLinking.io

You can set up server-side or JavaScript integrations under the 'Integration' view, once you've logged into InternalLinking.io. To test the integration, enter a page URL from your site in the integration testing tool and click 'Test'.

The test will show the API request that will be sent and the response that will be returned for that specific page. For server-side integration, the test will display the API request you need to make to fetch internal links. It will also show the response i.e. the links that will be returned.

This is useful for developers who want to integrate internal linking directly into their backend systems. For a JavaScript integration, the test will show the JavaScript code required to fetch and display internal links dynamically on the front end. It will also display the live response i.e. the links for the specific page being tested. This is useful for adding internal links without needing to modify your backend.

After testing, review the live response for the page. Ensure the links returned match your expectations. If everything looks good, proceed with implementing the integration on your site.

Server-side integration

The InternalLinking.io API returns a list of anchor texts & destination URLs for page, with an optional grouping by module. A grouping may be used to render one block of links in one section of the screen and another elsewhere.

A typical response should resolve within 50 ms. Most customers also cache locally since linking mostly updates daily or weekly. To reduce latency from your side you should keep the connection open for subsequent requests.

If you don't have an API key yet, you can request a new one in the Integration view of your workspace.

You would do a POST request to our endpoint with

  • an X_API_KEY header containing the API key
  • a User-Agent header indicating your application. For example example corp/1.0 (+https://www.example.com).
  • the following body:
    {"url": "https://www.example.com"}

We would respond with a JSON object:

  • HTTP 204 and an empty body if there are no links to be shown on the page.
  • HTTP 200 if we do have links, and the following body:
{
    "relatedSearches" : [
        {"name": "<anchor text>", "url": "<destination URL>"},
        {"name": "<anchor text>", "url": "<destination URL>"},
        // ...
    ]
}

JavaScript (and Google Tag Manager) Integration

Besides our server side integration, the InternalLinking.io API also works with a client-side integration. You can simply put a script block in manually or add it via Google Tag Manager (GTM) and add an empty HTML element in your HTML template, e.g. in the footer. The script will pull the links with the API key we provide and update the HTML page automatically.

1. The JavaScript block - NOTE - contact us for the API key. - NOTE - we are about to migrate the endpoint, contact us for the new URL before working on the integration.

<script src="https://isentropic-snow-282609.ew.r.appspot.com/api/js-internal-linking/?apikey=XXX" defer></script>

2. Empty HTML element

<div id="similarai-relatedSearches" class="nav"></div>

For an example of one of our clients using this client side integration, look at Utility Bidder. You can find their internal links get pulled in and rendered, when you open a page such as https://www.utilitybidder.co.uk/business-electricity/

image

Add script block with Google Tag Manager

  1. Go to the GTM tags and add a new tag:
<script>
  var script = document.createElement('script');
  script.defer = true;
  script.src = "https://isentropic-snow-282609.ew.r.appspot.com/api/js-internal-linking/?apikey=XXX";
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

  1. Add a new trigger. For instance, this could be the page view event for pages that are supposed to pull the internal links from Similar.ai.

  2. Preview and Publish.

JavaScript with WPCode Plugin

1. Import JavaScript into the WordPress Footer - Make sure the WPCode plugin is installed prior to proceeding. - Navigate to https://wordpress.dev.similar.ai/wp-admin/admin.php?page=wpcode-headers-footers on your WordPress admin dashboard.

image

2. Embed HTML Code within Post Editor - Create a Code Block: Initiate a new code block within the post editor.

image

  • Paste HTML code: Copy <div id="similarai-relatedSearches"></div> and paste it into the code block and switch to Edit as HTML mode.

image

3. Re-paste the HTML code

image

image

Ghost Client-side Integration

1. Import JS file in Code injection - e.g. on our Ghost test env it’s on https://ghost.dev.similar.ai/ghost/#/settings/code-injection\

image

Site Header:

<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>

Site Footer:

<script src="https://dev-dot-isentropic-snow-282609.ew.r.appspot.com/api/js-internal-linking/?apikey=2ZPhgwLAHkwI1bUgR6HrBfqc6GbXZpg8"></script>

2. Put the <div> code in the right place on the post template: current/content/themes/source/post.hbs

image

<div id="similarai-relatedSearches"></div>

3. Then the links will be shown automatically

image

For the endpoint of our production env and your API key, please talk to our onboarding team on set it up.

Questions, features or bugs?

For any questions or support, please feel free to contact us at hello@similar.ai. Alternatively, suggest improvements or new features for our internal linking tool.