Highlight Scripture References on your Website

The Highlighter gives you a way to integrate Scripture passages from the BibleSearch Website into your own site. It adds an interactive Scripture browser to your web pages, so that your visitors can easily read and explore the Scripture referenced on your site. All you do is mark the Scripture references on your site, and the Highlighter does the rest.

Let's say you have a devotional Website that looks like this:

By adding the Highlighter and making a few changes to your HTML, your Website now looks like this:

When a visitor clicks on "John 3:16", she will be able to read the verse in its chapter context, and navigate to the other chapters and books of the Bible.

When she's done reading, your visitor can click the X to close the mini Scripture window, and she'll be reading your devotional again.

Screenshots don't tell the whole tale, so you can try out a demo of the Highlighter to see for yourself how it works.

How do I use it?

Adding the Highlighter your site is a two step process. First, add the following line of HTML code to your website:

<script id="bw-highlighter-src" src="//biblesearch.americanbible.org/linker/js/client.js"></script>

Next, find any Scripture reference that you want linked to BibleSearch and surround it with <cite class="bibleref"></cite>. For instance, if your HTML originally looked like:

<p>One of my favorite verses is John 3:16</p>

You would change your HTML to be:

<p>One of my favorite verses is <cite class="bibleref">John 3:16</cite></p>

Now, when visitors use your Website, they can click John 3:16 to read that verse without leaving your Website.

Can I use a different version?

By default, the Highlighter will link to the GNT (Good News Translation). However, the Highlighter can be configured to use any translation available on the BibleSearch website. For instance, if you would like to use the KJV instead, add the Highlighter to your site with this code instead:

<script>var ABS_LINKER = { version: 'KJV' };</script> <script src="//biblesearch.americanbible.org/linker/js/client.js"></script>

Now, when you use the <cite> tags to enable Highlighter functionality, The Highlighter will display scripture from the KJV instead of from the GNT. You can view all available versions and their abbreviations at our version index.

You can see a live example of using a different version on the Highlighter demo page.

Do I need to use <cite> tags?

If you can't or would prefer not to use <cite> tags to surround the Scripture references you'd like to link, the Highlighter also supports using <span class="bibleref"> instead. Using <span> tags should prevent any default browser styling from affecting the display of your Scripture references.

Can I link non-reference text with the Highlighter?

In some cases, the text you want to link to Scripture is not an actual Bible reference. By default, the Highlighter reads the reference you surround with <cite> tags and looks that passage up. However, let's say you have Website copy like this:

<p>I really like telling people about my favorite Bible verse.</p>

and you'd like to use the Highlighter to open up John 3:16 when your visitors click the words "my favorite Bible verse." As before, you would surround those words with <cite> tags, but you would include a title attribute to indicate the Bible reference. In other words, you would update your copy as follows:

<p>I really like telling people about <cite class="bibleref" title="John 3:16">my favorite Bible verse.</cite></p>

Now, the Highlighter will know to display John 3:16 when your visitors click the text "my favorite Bible verse."

You can see a live example of linking non-reference text on the Highlighter demo page.