> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.koala.sh/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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>
  `
}
```