Modal Offers

Overview

The modal trigger allows you to display Mulberry warranty offers to customers within a modal rather than directly on your page. The modal is best used in combination with the in-line offers - when a user has not selected an in-line offer and selects 'Add to Cart' on your PDP page, you can trigger the modal to call attention to the warranty offer they would miss out on. You can tie the modal launch to any selector you wish per the following example:

Alternatively, you can also launch the modal directly from an element separate from your 'Add to Cart' CTA. Branding applications of the text link and button branding is described in further detail below

Parameter

Definition

Required

Type

offers

Offers to display

yes

array

settings

Your settings returned from SDK

yes

object

onWarrantySelect

Callback to fire when customer selects warranty

yes

function

onWarrantyDecline

Callback to fire when customer declines warranty

yes

function

placement

label for classifying the usage. Possible values are currently 'pdp', 'cart', or 'checkout'

no

string

trigger

The CSS selector that will open the modal.

yes

string

Configuration and Styling

In addition to triggering the modal on adding to cart, you can also trigger the modal using static triggers, like a text link:

778

or choose from one of our branded button designs by using the data layout parameter. For example, using the dark button config in the class selector:

<div class="mulberry-modal-trigger-2" data-layout="button-dark"></div>

displays the following button:

778

You can choose a variety of different layouts to use the button design most appropriate for your site.