Implementing Potions banners on your website

Implementing Potions means to add a javascript snippet called Potions Tag on every page of your website.
Potions Tag is a Js script that you can add manually or via GTM to the pages of your website to show personalized product recommendation banners coming from Potions Data API
Usually a Potions Tag
  • Observes the page on which it is installed to extract variables such as “viewing_item”, “cart_items”…,
  • Fetches product lists from Potions Data API
  • Modifies the interface (displays recommendations, a button, fills out a form...),
  • Sends events to analytical or CRM tools if necessary.
You can create amazing recommendation banners on your website by either:
  • asking the Potions team to develop a Potions Tag and customize it to your need
  • asking your Web agency or your tech team to develop a Potions Tag
  • (very soon) installing Potions Tag and editing it in Potions interface
This documentation aims at explaining
  • What Potions librairies can do for you
  • Potions Tag’s technical features
  • How to create your first Potions Tag

What Potions librairies can do for you

Potions librairies simplify the creation of personalized product recommendations banners on your website.
The recommendation banner “Fréquemment achetés ensemble” is created by a Potions Tag.
Potions Tag is a repo showing examples of recommendation banners, using Potions Wizard and Potions Spells that any developer can use to bootstrap its own recommendations.
Examples available in Potions Tag rely on two modules developed by Potions : Potions Wizard and Potions Spells.
Potions Wizard relies on 2 sub-modules developed by Potions as well : Potions Grimoire and Potions

Key concepts

Every product recommandation banner is a combination of
  • a placement: where you want the banner to appear
  • one or more variables : information that can be found in the web page and that will be used to call Potions Experience API
  • a template : the look and feel of your banner
  • an experience : an experience basically
    • observe some variables value,
    • fetches a product list from the Potions Data API with the given experienceId and the provided variables’ values
    • render HTML from the provided template and the received product list
    • insert this HTML in the provided location
  • (eventually) actions : the actions will add dynamic behavior to your banners like adding to cart, sending analytics, inserting/updating an element…

Analyzing a simple example

import {Wizard} from "@potions/wizard" import { experience, defaultTemplate, dialogLocation, elementData$ } from "@potions/spells" const lib = Object.entries({experience, defaultTemplate, dialogLocation, elementData$}) window.pts = Wizard([ ...lib, [ "viewingItem", { elementData$ : [ //CSS_selector preceded by # "##product", //function returning the data from the element (element) => element.dataset.productId ] } ], [ "productReco1", { experience : [ SITE_ID, { "#" : { experienceId: EXPERIENCE_ID, experienceName: EXPERIENCE_NAME, apiVersion:"v1" } }, {"#viewing_item":"viewingItem"}, "defaultTemplate", "dialogLocation" ] } ], ])

Real life example - Bundle La Bécanerie

🏍️Potions Tag Example - La becanerie bundle

Potions Tag technical features

Potions Tag is coded in reactive programming which allows it to be extremely light and to operate only when it is called.
⚙️Benefits of reactive programming
It can be hosted at Potions (recommended) or on your servers (you manage the security but lose flexibility).
🏢Hosting options
It does not slow down your site. We have developed a test procedure that we detail and pass on your site before any deployment in production.
Potions Tag performances

Creating your first Potions Tag

  1. Ask for your access to Potions Github by sending a mail to
  1. Launch Potions Tag locally
    1. 🚀Launching Potions Tag locally
  1. Inject Potions Tag with our Chrome extension
    1. 💉Injecting a Potions Tag developed locally with Potions Injector