Get information about a Bible verse
On any page.

OneTouch 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 OneTouch 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.

VerseFinder

On Your Website

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


<script src="https://app.onetouchversefinder.com/onetouch.js"></script>

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


/*
The Biblesoft function takes two arguments.
The first being a CSS Selector String, the second being an optional parent element.
*/
OneTouch("body .allThingsWithThisClass");
//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="https://app.onetouchtonline.com/onetouch.js" type="text/javascript"></script>

<script>
  Biblesoft.config("onload","#content");
  /*  the onload config, accepts a CSS query 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="https://app.onetouchversefinder.com/onetouch.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("#config",SomeParentElement);
  </script>

</body>

Top

Configure

VerseFinder has a few configuration options to change how it works. You start off by using the OneTouch.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 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
});

Top