VerseFinder

Take Your Study With You.
Tag and Read Scripture on Any Site.

At a Glance

  • Biblesoft’s VerseFinder allows you, or your website visitors to immediately view a Bible passage by simply hovering or clicking on the passage.
  • For example with John 3:16, if you hover over or click the link, a small window will open.
  • By clicking on the icon, or the Read More link you will be directed to the Biblesoft app where you can read further, and study what you’re looking at.
Using Versefinder

On Any Website

Drag this to your bookmark bar, and simply click it, and it will find all the verses on the page.
Or, you can install this chrome extension, that will automatically search pages for you, and allows you to customize the experience.






On Your Website

Copy this script tag, and place it in your template document, or in each of your HTML files.


<script src="http://app.biblesoft.com/verseFinder/biblesoft.min.js"></script>

To get the fastest usability, VerseFinder will automatically search any element with the class name “Biblesoft”, or you can call the Biblesoft function.


/*
The Biblesoft function takes two arguments.
The first being a CSS selector string, the second being an optional parent element.
*/
Biblesoft(".someClass", someParentElement);
//really simple

To make your own link like: The shortest verse in the bible! just create an Element with a data-verse attribute.


<span data-verse="John 11:35">
  The shortest verse in the bible!
</span>

Checkout the Configuration section for more options. Top

Examples

In the Head:


<head>
  <script src="http://app.biblesoftonline.com/verseFinder/biblesoft.js" type="text/javascript"></script>

<script>
  Biblesoft.config("onload","#content");
  /*  the onload config, accepts a CSS selector string to run
      when the page loads
  */
</script>

</head>
<body>
  <div id="content">John 3:16</div>
</body>

In the Body:


<head>
</head>
<body>

  <div id="content">John 3:16</div>

  <script src="http://app.biblesoftonline.com/verseFinder/biblesoft.js" type="text/javascript"></script>

  <script>
    Biblesoft.config("onload","#content");
    /*
	  setting the onload configuration is the best way if you don't require a parent element
      otherwise you should set onload to false, since by default it is true
      Biblesoft.config("onload",false);
      Biblesoft("#content",SomeParentElement);

      Using the Biblesoft function, is also useful for dynamic conent that you load in.
	*/
  </script>

</body>

Top

Configure

VerseFinder has a few configuration options to change how it works. You start off by using the Biblesoft.config function, which can take a key value pair, or an object of key values, like is some of the examples above.


Biblesoft.config({

  bible:"kjv",
  commentary:"mhc-abridged",

  hoverIn:1000, //1s
  hoverOut:2500, //2.5s

  redLetter:true,
  verseNumbers:true,

  /*
    A CSS selector string of what elements 
    to ignore while searching
   */
  ignoreQuery:"code,pre,h1,h2,h3,script",

  minimumSearchError : 0.4,

  /* 
    These dimensions are for the
    content section of the verse finder.
   */
  width:400,
  height:175,

  onload:true,

  /*
    This will make user experience nicer,
    because the content will be
    loaded in the background, but if you 
    are afraid of your page slowing down
    it is okay to set this to false.
  */ 
  lazyLoad:true
});