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:

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:

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