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.

https://www.la-becanerie.com/carburateur-dell-orto-phbn-175-ls-booster-nitro.html

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.

github.com/potions/potions-tag

Examples available in Potions Tag rely on two modules developed by Potions : Potions Wizard and Potions Spells.

github.com/potions/potions-wizard github.com/potions/potions-spells

Potions Wizard relies on 2 sub-modules developed by Potions as well : Potions Grimoire and Potions

github.com/potions/potions-grimoire github.com/potions/potions-formula

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

javascript
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

Ask for your access to Potions Github by sending a mail to julien@get-potions.com

Launch Potions Tag locally

🚀Launching Potions Tag locally

Inject Potions Tag with our Chrome extension

💉Injecting a Potions Tag developed locally with Potions Injector

Implementing Potions banners on your website