KoalaLinks Code Snippet and Configuration

To get the benefits of using KoalaLinks, you need to install the code snippet on your site.

The snippet does not slow down your site at all. It is cached and served globally via Cloudflare's network meaning it will load fast everywhere in the world.

Installing KoalaLinks Snippet

1) Go to your domain in KoalaLinks
2) Click the Snippet button
3) Click Copy Snippet
4) Insert the code in your site

The final step of inserting it in your site depends on your website's platform, but almost every website will allow for adding custom HTML code.

The code can be added anywhere on your site, including the header or the footer.

Configuring KoalaLinks Snippet

The snippet is highly configurable, allowing you to turn on/off features and also make modifications to many features.

To change the config, you can update the window.KoalaLinksConfig variable to overwrite the default configuration.

Change "RELATED" Text

You might want to change the related text to be in a different language, add a colon at the end, or some other change.

That is easy to accomplish by editing the following setting:

window.KoalaLinksConfig = {
    inlineRelatedPostTemplate: `
    <div class="kl-inline-related-post">
      <span class="kl-related-post__title">RELATED</span>
      <a class="kl-related-post__link" href="{{url}}">{{title}}</a>
    </div>
  `,
}

Just edit the "RELATED" text to anything you would like, for example "Related:".

For example, here is what the full snippet would look like (make sure to use the correct domain ID):

<script>
    window.KoalaLinksConfig = {
        inlineRelatedPostTemplate: `
            <div class="kl-inline-related-post">
                <span class="kl-related-post__title">Related:</span>
                <a class="kl-related-post__link" href="{{url}}">{{title}}</a>
            </div>
       `,
    };
    var script = document.createElement("script");
    script.defer = true;
    script.src = "https://koala.sh/api/eucalyptus.js?domainId=DOMAIN_ID&page=" + encodeURIComponent(window.location.protocol + "//" + window.location.host + window.location.pathname);
    document.head.appendChild(script);
</script>

Change Article Selector

If the snippet is not able to automatically determine your article's content you might need to update the selector.

For example, if your content is inside a <div class="main-content"> element then you can update the configuration like this:

window.KoalaLinksConfig = {
  articleSelector: [".main-content"]
}

Insert Related Posts Section

To specify where the related posts section should be added to the page you can add the selector to the configuration.

For example, if you want it to be added inside <div class="related-posts">:

window.KoalaLinksConfig = {
  relatedPostListTargetSelector: [".related-posts"]
}

Add Related Posts Before H3s and H2s

By default, the inline related posts will only be inserted before each H2.

The relatedPostInsertBeforeSelector can be changed to accomodate other options, like both H3s and H2s:

window.KoalaLinksConfig = {
  relatedPostInsertBeforeSelector: "h2, h3"
}

Turn Off Internal Linking

Set enableInternalLinks to false

Example:

window.KoalaLinksConfig = {
  enableInternalLinks: false
}

Turn Off Inline Related Posts

Set enableInlineRelatedPosts to false

Example:

window.KoalaLinksConfig = {
  enableInlineRelatedPosts: false
}

Turn Off Related Posts Section

Set enableRelatedPostsAtBottom to false

Example:

window.KoalaLinksConfig = {
  enableRelatedPostsAtBottom: false
}

Open Links in a New Tab

window.KoalaLinksConfig = {
  openLinksInNewTab: true
}

Default Configuration

Here is a list of the default configuration:

{
  enableInternalLinks: true,
  enableInlineRelatedPosts: true,
  enableRelatedPostsAtBottom: true,
  enableSchema: true,
  autoRun: true,
  openLinksInNewTab: false,
  css: `
    .kl-related-post__title {
      font-weight: bold;
    }

    .kl-related-post-list__item {
      margin-bottom: 10px;
    }

    .kl-related-post-list__container {
      margin: 0;
    }
  `,
  extraCss: "",
  schemaId: "koalalinks-schema",
  styleId: "koalalinks-styles",
  articleSelector: [".entry-content"],
  relatedPostInsertBeforeSelector: "h2",
  relatedPostSkipCount: 0,
  inlineRelatedPostTemplate: `
    <div class="kl-inline-related-post">
      <span class="kl-related-post__title">RELATED</span>
      <a class="kl-related-post__link" href="{{url}}">{{title}}</a>
    </div>
  `,
  relatedPostListTargetSelector: [".entry-content"],
  relatedPostListCount: 5,
  relatedPostListTemplate: `
    <div class="kl-related-post-list">
      <h3 class="kl-related-post-list__header">Related Posts</h3>
      <ol class="kl-related-post-list__container">{{relatedPosts}}</ol>
    </div>
  `,
  relatedPostListItemTemplate: `
    <li class="kl-related-post-list__item">
      <a class="kl-related-post-list__link" href="{{url}}">
        {{title}}
      </a>
    </li>
  `
}

Updated on: 20/02/2025