With the addition of a simple HTML script tag on your web pages, all your Bible references can be automatically turned into links that provide both a preview of the verse and a link through to the Online Bible, like this: John 3v16.
Installing the script
The script tag you will need is this:
This can be inserted anywhere in the HTML of your page. Typical places might be just before the closing </head> tag near the top of your page, or just before the closing </body> tag near the bottom
of your page.
If you want to tag many pages on a website then rthe best place to insert the script will be in your template or some common element included on each page (such as a footer).
VerseLinker's default settings should work in most situations, but you can also configure aspects of its operation and change the styling of the links and popup.
Optional operation configuration Useful if you need to specify which pages of your site are parsed, or override the language used, for example.
To change VerseLinker's default settings you include various attribute parameters inside the <script> tag like this (shown on separate lines for clarity, but typically only separated by a space - see examples below):
All parameters are OPTIONAL, but if supplied have the following effects:
data-close
If present, gives the verse popup an explicit close control. By default, the unicode window close character "✖" is used for this, but you can OPTIONALLY override it by supplying a different character as a parameter to the attribute (e.g. data-close="x")
Example:
data-container
CSS-like selector(s) to specify an element(s) within which VerseLinker will look for Bible references to parse. If you have consistent sections within which you expect Bible references to appear, it can be a good idea to specify these here to
speed up the parsing of the page. You can specify any number of elements separated by a comma. It does not matter if some of these do not exist on any given page - they will be safely ignored. If omitted defaults to "body", the
<body> tag. Example:
data-debug
If present, VerseLinker will emit logging messages to the browser's console log. If the script is not operating as expected, using this can be helpful in diagnosing the problem. Example:
data-delay
Specifies a number of milliseconds that VerseLinker should wait after the page is loaded before parsing for references. This could be useful if you need to wait further for some content to display. If omitted, defaults to "0", meaning
no delay. (You can also manually control when parsing takes place - see data-manual below.) Example:
data-langs
Specifies how VerseLinker should determine the language of Bible references when parsing. If omitted, defaults to "page", meaning that VerseLinker will try to determine it from the HTML of your page. The other options are: "all",
which will check for references in all the languages supported by VerseLinker; or a space-separated list of language codes (e.g. "en fr ca") to use. Example:
data-manual
If present, this attribute prevents VerseLinker from automatically parsing pages. This can be required if, for example, your page content is built dynamically after the main page load. If using this, you will need to initiate parsing with
your own code - use this line of JavaScript verseLinker.parse(el); where el is the DOM node(s) on your page in which to parse (or omit to parse the entire body). Example:
data-pages
Specifies which web pages on your domain will be parsed (assuming that you have included the script on all pages). You can use the wildcard * to mean any number of characters, or ? to mean any single character (see example below).
You can also include mulitple paths separated by a comma. If omitted defaults to "/*", meaning all pages. Example:
data-pages-exclude
Specifies which web pages on your domain to exclude from parsing(assuming that you have included the script on all pages). This parameter works in a similar (but reverse) manner to data-pages above - also supporting wildcards and multiple
paths. Exclusions are checked for AFTER seeing if a page is included as per data-pages above. If omitted defaults to "", meaning no pages are excluded. Example:
data-trigger
Can be set to "hover" or "click" to specify what user action on a reference will trigger the verse popup to appear. (Note that even when set to "hover", references will still respond to clicks.) If omitted defaults to "click". Example:
Optional styling configurationChange the look and feel of the Bible references found by VerseLinker, or the popup displayed when those references are clicked.
You customise the look and feel by using CSS. CSS rules are placed inside a <style> tag on your page (often found within the <head> section) - either add to a pre-existing style block, or add one just for this purpose, perhaps
after the verselinker script tag, like this:
Parsed references
When VerseLinker finds a Bible reference on your page, it turns it into a link that can be clicked in order to bring up the text of that Scripture. It achieves this by placing your Bible references within an HTML tag <verselink>.
VerseLinker includes some basic default styling of these tags to make the references stand out on your page. The examples below give a little idea of how this can be changed - search the Internet for CSS resources to take things further.
Psalm 23:1
This is what the default styling of parsed references looks like.
Psalm 23:1
Make text bold like this:
Psalm 23:1
Change the background and text colours like this:
Styling options available (shown with default settings): --linkColor: #008; --linkBackground: transparent; --linkUnderline: 1px solid; --linkFont: inherit; --linkSize: inherit; --linkWeight: inherit;
Scripture popup
Psalm 23:1 (click to show)
This is what the default styling of the Scripture popup looks like.
We would love to hear if you make use of VerseLinker on your site, or indeed if you ran into difficulties trying to use it. Tap here to give us feedback.
