Betterlink Documentation

everything you want to know


The Basics

With Betterlink, your visitors can share and save your content easier than ever before.

Betterlink is a basic add-on for your website. Once enabled, all of your content is immediately linkable. The same way you might share a link to a page you found interesting, now your users can link directly to the piece of the page you want them to see.

To get a sense of what this means, check out this link: click here

If you load this page from the above link, you'll end up right here at this paragraph. Pretty cool? It's easy to setup.


Simple Setup

In most cases, all you need to do is add the Betterlink library to your site. This is also the same step you'll need to take, no matter how complex your setup is.

To add the library to your site, you'll need to find two things first:

  1. The script text you'll need to copy and paste (we've got you covered here)
  2. Where you're going to add the script

Script Text

    <script>
      (function(d,s,id){
      var js,fjs = d.getElementsByTagName(s)[0];
      if(!d.getElementById(id)){
      js=d.createElement(s); js.id = id; js.defer = true;
      js.src="//code.betterlink.io/betterlink.js";
      js.setAttribute('data-script-source','within source');
      fjs.parentNode.insertBefore(js,fjs);}
      }(document,'script','betterlink-js'));
    </script>

In simpler terms, this creates the following script element for your page:

    <script defer id="betterlink-js" src="//code.betterlink.io/betterlink.js" data-script-source="within source"></script>

The only difference is that we structure the script tag specially so that it doesn't block any other content on your page from loading.

Script Placement

When adding Betterlink (or any library) to your website, you want to keep two major things in mind:

  1. loading your own content as fast as possible
  2. ensuring Betterlink loads on all of the pages on your site

Quick and simple answer: you should add Betterlink just before the closing </body> tag on your webpages

Before digging into the details, one simple fact: no matter where you add the script, it's still going to work. We're just trying to help make sure you get the best experience.

Details

In the script that's copied above, we add the defer attribute when requesting to load Betterlink. This tells your visitor's browser that all of the code inside the Betterlink library doesn't need to run until the rest of the page has loaded. This is a trick we use so that we give all of your content priority when loading your webpage.

Some older browsers don't use the defer attribute when figuring out when to load and run JavaScript on the page. If you don't have a lot of visitors to your website that are using older web browsers, this isn't a problem. If you do, then another tactic is to move the script as far down the page as possible. This way, the web browser will load everything else first, before trying to load any additional JavaScript. In your source code, this would be just before the closing </body> tag.

Another thing to check: when you add Betterlink to your site, you want to add it to every page on your site. If you use some sort of shared footer, this is a good place to add the script. It loads on every page and sits at the bottom.

Another option is to check if your site already loads shared resources. These typically are in the <head> of your webpages. If you already load stylesheets and JavaScript here, this is probably a good place to add Betterlink as well.

If you want to see an example, you can check the source code for this page and see where we've added the Betterlink script.

Initializing Betterlink

The good news: If you're following this simple setup, you're all done!

When your browser loads the Betterlink script, it will automatically enable content sharing. We'll also automatically check if a visitor followed one of your new special links. If so, we'll take them to the requested portion of the page and highlight the content.

If you're concerned about any of the below topics, check out our Advanced Setup:

  • Redirecting mobile users (so they can see the same highlighted content)
  • Linking to dynamic content on a page (content that changes or displays sometime after the page initially loads)
  • Linking to content that displays when a hash is loaded in the URL (like http://example.com#my_content)
  • Customizing the look and feel of the highlights
  • Using permalinks to link to pages that change their address