Intelligems Widget
      Back to home
      1. Knowledge Base
      2. Integrating Your Site
      3. Intelligems Widget

      Intelligems Widget Overview

      Get a comprehensive overview of the Intelligems Widget and all its features in various modes.

      In this article:

      ❗Before you can use the Intelligems Widget, please confirm that you have added Intelligems JavaScript as a source into your theme.liquid file and created (but not started) a test in the Intelligems app!

      Widget Modes and Capabilities

      The Intelligems Widget has three different modes: preview, integration and a combo of the two. See below for the capabilities of each mode. 

      Preview Mode

      Enter this mode by adding ?ig-preview=true to your website's URL.

      This mode allows you to preview and QA your test before it goes live - you will be able to select which test you are previewing using the dropdown on the left, and switch between test groups using the dropdown on the right to see what the site will look like for each group.

      ❗Make sure to hard refresh (Cmd + Shift + R for Mac / Ctrl + F5 for PC) when switching between experiments and groups to ensure everything updates.

      Integration Mode: 

      Enter this mode by adding ?ig-integration=true to your website's URL.

      While this mode also allows you to switch between groups and preview changes, the primary use for Integration Mode is to give you the ability to easily integrate your store with Intelligems by adding selectors and tagging price elements. This article will walk you through using the widget for the integration process.

      There will be two additional tabs on the left side of the widget when you enter Integration mode:

      The first is 'Selectors':

      Here are all of the different Selector types:

      Price: Use this section to select product prices on your store's site.

      Compare At Price: Use this section to select compare prices on your store's site.

      Installment: Use this section to select installments on your store's site. The default number of payments is 4. To change the payment amount, add the below to the element containing your installment in your theme.

      data-payment-count"{{payment_amount}}"

      The Installment selector is compatible with installments that are:

      1. Directly in your liquid
      2. Not in the liquid, but is wrapped in its own <span>

      This selector is not compatible with installments that are:

      1. Wrapped in a Shadow DOM
      2. Not wrapped in its own span

      Savings (Price): Use this option to select the dollar savings amount. This is normally located on your product pages.

      Savings (Percentage): Use this option to select the percentage savings amount. This is normally located on your product pages.

      The second is 'Advanced':

      ❗ This section is normally used by the Intelligems Integration Engineers. Please modify this section with extreme caution. Reach out to support@intelligems.io if you believe you need options in this tab modified.

      A few of the more commonly use options in this section include:

      currencyFn: Use this option to enter a custom currency function name. This is typically used when you are testing prices on multiple currencies. See this article for more information on testing multiple currencies.

      Currency Format: Use this option to specify the format for how currencies are displayed on your site. This is a JSON input.

      Preview and Integration Mode:

      Enter this mode by adding ?ig-preview=true&ig-integration=true to your website's URL.

      Both modes may be used together at once, and all above capabilities will be available.