Widgets are personalized content blocks you can place on your e-commerce web or mobile web store as well as native mobile apps through a webview. These could be product recommendation for a known customer or recommendations based on what a user is viewing. When done well, personalized content could account for over 30% of your sales.

Getting started

  1. Create a widget and customise its look and feel
  2. Install the Metisa plugin on all pages of your website
  3. Insert the widget code block where the widget should appear

Creating a widget

Each widget has a HTML template which you can use to customise its look and feel. You can use a 3-column, 4-column or even a carousel layout (with the help of Javascript). You can insert any of the top 16 products a customer is likely to buy in your templates using merge fields.

HTML templates support Django template tags and filters. You can even use built-in filters like humanize to format data points.

The products are prefixed from PRO1_ through PRO16_ and the following merge fields are available:

Description Merge Fields
Product name PRO1_NAME, PRO2_NAME ... PRO16_NAME
Product description PRO1_DESC, PRO2_DESC ... PRO16_DESC
Product URL PRO1_URL, PRO2_URL ... PRO16_URL
Product image URL PRO1_IMG, PRO2_IMG ... PRO16_IMG
Product list price PRO1_PRICE, PRO2_PRICE ... PRO16_PRICE
Product discounted price PRO1_PRICE_D, PRO2_PRICE_D ... PRO16_PRICE_D
Product discount label (e.g. 30% off, $20 off) PRO1_DISCOUNT, PRO2_DISCOUNT ... PRO16_DISCOUNT

Installing a widget

To install a widget, paste the code from Widget - Installation onto your website just before the </body> on all pages that you may want widgets to appear. Replace customer_id with your Customer ID so we know who you want to personalize the widget for.

Then, insert the widget where you want it to appear on your page. You have to replace {{widget_id}} with the Widget ID listed in the Snippet column of the table on Widget - Widgets.

IMPORTANT: Widgets will only render on the page with a valid Customer ID and Widget ID.