Installing the Evri Popover Widget On A Web Page

Installing the Evri Widget on a webpage should be as easy as inserting the script below into your page. This script does assume that you are using standard HTML conventions to notate your title and the contents of the page. Specifically, the script assumes that your page title is marked as <h1>Example Page Title</h1> and that the contents of your page are marked with <p>This is example content</p>. If your website uses other HTML tags to identify the title and contents of your website, modify the following line:

var contentCSSSelector = 'h1, p';

to reflect the tags that you use. For example, if your content is contained in <div> tags, change the line to the following:

var contentCSSSelector = 'h1, div';

Additionally, the script assumes that the content of your web page is within the <body> tag and that you want to provide recommendations for the contents of your entire page. If your web page contains multiple documents or you want to provide separate recommendations based upon different sections of your text, you should modify the following line:

var documentCSSSelector = 'body';

to use a tag that surrounds the section or sections of text you wish to to use in providing recommendations.

Evri Widget invocation script

Insert launch point inline

<div class="evri-widget-launcher">
  <a href="http://www.evri.com/"
     title="Get content recommendations from Evri">
     Content recommendations from <em>Evri</em>
  </a>
</div>
<script
     type="text/javascript"
     charset="utf-8"
     src="http://www.evri.com/widget/javascripts/contentRecommendation.1.js"></script>
<script type="text/javascript" charset="utf-8">
Evri.$(window).ready(function () {
  var documentCSSSelector = 'body';
  var contentCSSSelector = 'h1, p';
  var widget = new Evri.Widget.ContentRecommendation();
  widget.popover();
  Evri.$("a.evri-widget-invocation-point").click( function(){
  widget.sendContent( Evri.$(documentCSSSelector).
  find(contentCSSSelector).mergeHtml() );
  widget.center();
  });
});
</script>
<a href="javascript:;" class="evri-widget-invocation-point">
<img src="http://www.evri.com/images/buttons/widget_launcher.png"
alt="Get content recommendations from Evri"/>
</a>

Insert launch point at bottom of page

<div class="evri-widget-launcher">
  <a href="http://www.evri.com/"
     title="Get content recommendations from Evri">
     Content recommendations from <em>Evri</em>
  </a>
</div>
<script
     type="text/javascript"
     charset="utf-8"
     src="http://www.evri.com/widget/javascripts/contentRecommendation.1.js"></script>
<script type="text/javascript" charset="utf-8">
Evri.$(window).ready(function () {
  var documentCSSSelector = 'body';
  var contentCSSSelector = 'h1, p';
  var widget = new Evri.Widget.ContentRecommendation();
  widget.popover();
  widget.placeInvocationPoints(documentCSSSelector,
                               contentCSSSelector,
                               {});
});
</script>

Questions?

If you have any questions or issues installing our widget on your page, we’d love to hear from you. Just post a comment below, and include your blog URL, and we’ll get back to you as soon as we can.

One Response to “Installing the Evri Popover Widget On A Web Page”

  1. Evri helps you search less and understand more Says:
    September 27th, 2008 at 8:44 am

    [...] current push, though, seems to be to get bloggers to add an Evri widget to their blogs that will pop up a window with links to related articles and [...]

Leave a Reply