Guided Recs JS Plugin - Getting Started

This plugin is designed to be placed on a dedicated page of your e-commerce website to provide customers with wine recommendations from your inventory based on choices that the customer selects. Guided Recommendations is more than a basic filtering of wines, like traditional search or browse features. Guided Recommendations models the taste preferences of the user based on how the user answers the questionnaire, and then selects appropriate wines from your selected inventory collection.

This is a single page application with no routing. Additional modal entry points can be added on other webpages (eg homepage) with simple HTML/JS.

What is required to implement:

A synced inventory collection_id (provided by Preferabli)
An integration_id (provided by Preferabli)
Ability to add JS/CSS to HTML head
Ability to add a dedicated Guided Recommendations page with raw HTML
Ability to add a HMTL tags on additional pages for in-person modals
Website whitelisted for use, please reach out to [email protected] for CORS whitelisting

How to implement:

Include the following within the head of your website:

jQuery: https://guidedrec.preferabli.com/preferabli.guidedrec.js
Global stylesheet: https://guidedrec.preferabli.com/preferabli.guidedrec.style.css

<script type="text/javascript" src="https://guidedrec.preferabli.com/preferabli.guidedrec.js"></script>
<link rel="stylesheet" href="https://guidedrec.preferabli.com/preferabli.guidedrec.style.css"/>

Create an empty div with id=guidedrec for Preferabli Guided Recommendations app to render:
```
<div id="guidedrec"></div>
```

Add the following snippet of code at bottom of website or below the div. Be sure to update variables with your custom ids:

<script type="text/javascript">
	// jQuery Version 
	(function() {

      var preferabliGR = $(document.createElement('div')).preferabliGR({
        integration_id: %INTEGRATION_ID%,
        questionnaire_id: %QUESTIONNAIRE_ID%,
        resultsRedirect: '%HTTPS://WWW.PATH.COM/TO/RESULTS/PAGE%',
      });

      $('.trigger-guidedrec-modal-q1').on('click', function(){ // Action to trigger Guided Rec Modal
        preferabliGR.preferabliGuidedRec('show');
      });

			//  To Show Questionnaire Results trigger when DOMReady for results page 
        preferabliGR.preferabliGR('show', {
          type: 'results',
          element: $('#guidedrec'),
        });

    })(jQuery);		
</script>

Multiple Guided Recommendations pages can be added to a website to allow use of multiple Guided Recommendations quizzes at once by giving each Guided Recommendations page appropriate values for integration_id/questionnaire_id/etc.