Adding Widgets to Your Store and Configuration

Right now, Qraga offers a handy inline widget that gives you pre-created FAQs, instant answers, comparisons, and contextual recommendations.

After creating your first widget, simply click and enter the details and customization screen.

Customization

At customize view, you have the option to tweak the look and feel settings of your widget to perfectly match your store.

Installation

First, make sure to add Qraga javascript to your product pages or at the global end of the html body on your website;

<script scr="https://cdn.qraga.com/widgets/assistant/v1/qraga-assistant.js"/>

After you've properly set the Qraga script file to your site, on your product pages, you just need a container div where the widget will be rendered inside.

<div id="qraga-widget-container"></div>

Then you should get your widget id from the widget customize page.

After you've obtained the widget ID, you just need to add the Qraga widget initialization code to your product page;

const qraga = new window.Qraga({
   widgetId: 'widget ID value',
   container: '#qraga-widget-container',
   product: {
     id: 'Current product id',
     variant_id: 'Current variant id' // this is optional
   }
});

Please note that here variant_id is optional. Also, if you have a variant and want to adopt variant selections of the user, you can;

qraga.setVariantId('new selected variant id')