Skip to main content

Website Widgets


The LMG Web Widget allows you to show dynamic offers on your website easily with a couple of lines of code.

It will display the offers from a collection, or from multiple collections, using a variety of layouts. These offers will track their impressions as reach events in the appropriate business dashboards. When clicked, they will take the viewer to your property's Public Offer Viewer, or redirect appropriately if you have configured redirects.


Each widget requires:

  • Property Integration Key
  • One or more Collection Ids

Supported Browsers

  • IE11+ / Edge 17+
  • Chrome 49+
  • Safari 5.1+ / Mobile Safari 11.3+
  • Firefox 69+
  • Opera 63+ / Opera Mini 1+

Getting Started

1. Add the Widget Container

Add an element to hold the widget to your page. Make sure to add it on the page where you want the widget to be displayed. If your page structure requires specific elements to enforce width and margins (ie. a specific row or column element structure), ensure that the Widget Container element is added inside the correct element.

By default, the widget is added to an element with an id of lmgOffersWidget. (See Widget Config)

<div id="lmgOffersWidget"></div>

2. Add Widget Script Tag

Add the correct script tag for the widget type to the bottom of the page body:

<script src=""></script>

3. Add the Widget Configuration

Add the widget configuration to your page:

window.lmgWidgetConfig = {
integration: "<the_integration_key>",
collection: "<the_collection_id>"


The LMG Web Widgets provide various configuration and styling options to customize for a specific web page and use case.

Widget Configuration Options

These are additional keys supported by the window.lmgWidgetConfig options. They allow customization of the widget initialization and behaviour.

integrationLMG integration key
One Of:
collectionLMG collection id
collectionsAn array of collection configurations (see Combo widget below)
elementDOM element reference for mounting (If set, takes precedence over elementSelector)
elementSelectorDOM selector string for element for mounting (Defaults: "#lmgOffersWidget"). If elementSelector matches multiple elements, the first found will be used.
display.headerString to display as widget header
display.hover.enabledShow hover effects on offer cards? (Default: true)
content.ordering"random" to shuffle businesses and offers returned; "source" to keep source ordering (Defaults to "random")
content.filterFilters the returned content based on type. Valid filters are "exclusive", "limited", or "featured". (Default: null)
tracking.nameString to add to links as utm_campaign parameter
tracking.sourceString to add to links as utm_source parameter
client.geoContextOptional geographic filtering context object. Allows content to be limited by geographic area or region.


In general, the widget will use the sizes and spacing inherited from the parent page's styling, including headings, links, fonts, etc.

For more control, every part of the widget has a specific css class that can be targeted.

Note: All classes are prefixed with lmg-widget_ to avoid affecting the rest of your page.

CSS Classes

.lmg-widgetBase widget container
.lmg-widget_headerWidget header
.lmg-widget_section_headerOptional section headers between layouts (Combo Widget only)
.lmg-widget_footerWidget footer
.lmg-widget-radiusSet corner radius on rounded elements
.lmg-widget_tilesTile layout containers
.lmg-widget_carouselCarousel layout containers
.lmg-widget_hero-offerHero offer layout containers
Offer Cards
.lmg-widget_offer-cardTop-level element for each offer


Types of Widgets

There are currently 2 widgets available on the platform:

Tile Widget

Lays out up to 9 offers in a responsive grid (see screenshot above).

This widget supports a single collection. It is initialized with the tile.js widget Javascript code:

<script src=""></script>

Combo Widget

An advanced widget that allows multiple layouts and collections to be displayed.

It is initialized with the combo.js widget Javascript code:

<script src=""></script>

The combo widget allows multiple collections to be specified in it's configuration:

window.lmgWidgetConfig = {
integration: "<the_integration_key>",
collections: [

The collections values can also be objects, with more details about the specific content and rendering options specified:

window.lmgWidgetConfig = {
integration: "<the_integration_key>",
collections: [
id: 'collection-a',
display: 'hero',
content: { filter: 'exclusive' }
id: 'collection-b',
content: 'exclusive',
display: {
layout: 'tile',
header: 'Exclusive Offers'

Public API

The widget is accessible on the page via the window.lmg object.

The current widget instance is accessed via a named property:

  • lmg.tiles - Tile Widget
  • lmg.combo - Combo Widget