Widget elements

When a user clicks the GreenLeaze button, a modal opens and displays the rental offer.

This page documents the configurable elements of the modal, the parameters accepted by each element, and the postMessage events emitted by interactive elements.

Sending data to the modal

Widget elements are configured through the data field of a greenleaze:dataChange event sent to the modal iframe.

const iframe = document.querySelector("#greenleaze-modal-container iframe");

iframe.contentWindow.postMessage(
  {
    type: "greenleaze:dataChange",
    modal: "product",
    data: {
      // widget elements
    },
    content: {
      // prices per duration
    },
    product: {
      // product info
    },
    variantId: "your-variant-id",
  },
  "*",
);

The modal can be updated at any time after it has loaded. Listen for greenleaze:modalInitialized to know when the iframe is ready.

Warning: all fields are processed together. If you send a partial payload, omitted fields may be unset. Always include the full payload when updating the modal.

Payload shape

{
  type: "greenleaze:dataChange",
  modal: "product",
  data: { ... },
  content: { ... },
  product: { ... },
  cart: [ ... ],
  variantId: "..."
}

Field	Required	Description
`type`	Yes	Must be `greenleaze:dataChange`.
`modal`	Yes	Modal type: `product` or `cart`.
`data`	Yes	Widget elements documented on this page.
`content`	Yes	Monthly prices per duration.
`product`	Product modal only	Product information.
`cart`	Cart modal only	Cart items.
`variantId`	Yes	Variant identifier.

Configuration-gated elements

Some elements can only be overridden through the live data event if the corresponding option is enabled in your GreenLeaze configuration.

Element	Behavior if not enabled
Illustration background color	Event value is ignored.
Subscribe / Booking button `label` and `style`	Event value is ignored.
`buttonMode`	Configuration value is used instead.

Contact GreenLeaze if one of these options needs to be enabled for your shop.

Title

Main title displayed at the top of the modal. It can be configured as a plain string or as multiple styled segments.

Default: enabled. A fallback title is displayed if no title is configured.

Example

{
  "title": [
    { "text": "Your subscription with " },
    { "text": "GreenLeaze", "color": "#0d5537", "bold": true }
  ]
}

Parameters

Parameter	Type	Required	Description
`text`	string	Yes	Segment text.
`color`	string	No	Hex color, for example `#0d5537`.
`bold`	boolean	No	Renders the segment in bold when set to `true`.

Event emitted: none.

Subscribe and Booking buttons

The modal can display a Subscribe button, a Booking button, or both.

Each button has its own label and style. Both buttons emit the same confirmation event, with the selected action available in the action field.

Default: Subscribe button only.

Button mode

{
  "buttonMode": "both"
}

Value	Result
`subscribe`	Shows the Subscribe button only.
`booking`	Shows the Booking button only.
`both`	Shows both buttons, stacked.

buttonMode is configured by default through features.buttonMode. To override it live through data.buttonMode, live override must be enabled in the GreenLeaze configuration.

Button labels and styles

{
  "subscribeButton": {
    "label": "Subscribe",
    "style": "background:#0d5537;border-radius:10px"
  },
  "bookingButton": {
    "label": "Book now",
    "style": "background:transparent;color:#0d5537;border:2px solid #0d5537;border-radius:10px"
  }
}

Parameter	Type	Required	Description
`label`	string	No	Button text. A default label is used if omitted.
`style`	string	No	Inline CSS declaration string applied to the button.

The style value must use standard inline CSS syntax:

property:value;property:value

Pseudo-states such as :hover are not supported.

Warning: button labels and styles can only be overridden live if this is enabled in your GreenLeaze configuration.

Event emitted

{
  "type": "greenleaze:submitGreenleazeModal",
  "action": "subscribe",
  "modal": "product",
  "duration": 24,
  "variantId": "your-variant-id",
  "product": {},
  "data": {},
  "instanceId": "default"
}

Field	Description
`action`	`subscribe` or `booking`, depending on the clicked button.
`duration`	Selected rental duration, in months.
`modal`	`product` or `cart`.
`variantId`	Variant identifier.
`instanceId`	Identifier of the affected widget instance.

window.addEventListener("message", (e) => {
  if (e.data.type === "greenleaze:submitGreenleazeModal") {
    if (e.data.action === "booking") {
      // Redirect to the bookingUrl returned when the transaction is created.
    } else {
      // Continue with the subscription flow.
    }
  }
});

Warning: no action is triggered automatically. Your integration decides what to do when the event is received.

Arguments

List of commercial arguments displayed on the left side of the modal.

Default: enabled. A fallback list of four arguments is displayed if no content is configured.

{
  "arguments": [
    {
      "label": "Theft / breakage warranty available",
      "icon": "https://cdn.example.com/icon.svg"
    }
  ]
}

Parameter	Type	Required	Description
`label`	string	Yes	Argument text.
`icon`	string	Yes	Icon URL. SVG and PNG are supported.

Event emitted: none.

Trustpilot badge

Displays the Trustpilot rating under the commercial arguments. It can also be made clickable.

Default: disabled.

Example

{
  "trustpilotBadge": {
    "rating": 4.6,
    "reviewCount": 1106,
    "clickable": true
  }
}

Parameters

Parameter	Type	Required	Description
`rating`	number	Yes	Rating displayed as stars. Must be between `0` and `5`.
`reviewCount`	number	No	Number of reviews displayed next to the brand name.
`clickable`	boolean	No	When set to `true`, the badge emits a click event.

Event emitted

Only emitted when clickable is set to true.

{
  "type": "greenleaze:trustpilotBadgeClicked",
  "instanceId": "default"
}

Field	Description
`instanceId`	Identifier of the affected widget instance.

Conditions link

Displays a text button below the duration selector, for example View conditions.

Default: disabled.

Example

{
  "conditionsLink": {
    "label": "View conditions",
    "link": "https://your-shop.com/conditions"
  }
}

Parameters

Parameter	Type	Required	Description
`label`	string	Yes	Text displayed on the button.
`link`	string	Yes	URL associated with the button.

Event emitted

{
  "type": "greenleaze:conditionsLinkClicked",
  "url": "https://your-shop.com/conditions",
  "instanceId": "default"
}

Field	Description
`url`	Configured URL.
`instanceId`	Identifier of the affected widget instance.

Warning: the link is not opened automatically. Your integration must handle the event and decide what to do with the URL.

Call button

Displays a secondary contact button with an optional icon.

The configured value is typically a tel:+33... URI, but any string can be passed and handled by your integration.

Default: disabled.

Example

{
  "callButton": {
    "label": "Call me back",
    "value": "tel:+33123456789",
    "icon": "https://cdn.example.com/phone.svg"
  }
}

Parameters

Parameter	Type	Required	Description
`label`	string	Yes	Text displayed on the button.
`value`	string	Yes	Value passed in the emitted event. Usually a `tel:` URI.
`icon`	string	No	URL of the icon displayed before the label.

Event emitted

{
  "type": "greenleaze:callButtonClicked",
  "value": "tel:+33123456789",
  "instanceId": "default"
}

Field	Description
`value`	Configured value.
`instanceId`	Identifier of the affected widget instance.

Warning: no action is triggered automatically. Your integration decides what to do with value.

Footer

Displays a strip at the bottom of the modal with a two-part tagline and an action button.

Default: disabled.

Example

{
  "modalFooter": {
    "labelOne": "Did you know your employer can fund part of your rental?",
    "labelTwo": "Up to €900 with the FMD scheme.",
    "buttonLabel": "Learn more →"
  }
}

Parameters

Parameter	Type	Required	Description
`labelOne`	string	Yes	Introductory text.
`labelTwo`	string	Yes	Highlighted text displayed next to `labelOne`.
`buttonLabel`	string	Yes	Text displayed on the footer action button.

Event emitted

{
  "type": "greenleaze:footerActionClicked",
  "instanceId": "default"
}

Field	Description
`instanceId`	Identifier of the affected widget instance.

Illustration background

Controls the background color displayed behind the commercial argument icons.

Default: disabled.

Example

{
  "illustrationBackgroundColor": "#f5f6f7"
}

Parameters

Parameter	Type	Required	Description
`illustrationBackgroundColor`	string	null	Yes	Hex color value, or `null` for a transparent background.

Event emitted: none.

Duration selector

Controls how the user selects the rental duration.

Default: slider.

Example

{
  "durationSelector": "buttons"
}

Parameters

Parameter	Type	Required	Description
`durationSelector`	string	Yes	Display mode. Accepted values are `slider` and `buttons`.

Accepted values

Value	Description
`slider`	Horizontal slider with labels underneath.
`buttons`	Row of clickable duration buttons.

Event emitted: none directly.

The selected duration is included in the greenleaze:submitGreenleazeModal event when the user confirms.

Handling widget events

Use a single message listener to handle all interactive widget events.

window.addEventListener("message", (e) => {
  switch (e.data.type) {
    case "greenleaze:submitGreenleazeModal":
      // e.data.action: "subscribe" | "booking"
      // e.data.duration: selected rental duration
      // e.data.instanceId: affected widget instance
      //
      // For "booking", redirect to the bookingUrl returned when
      // the transaction is created.
      break;

    case "greenleaze:trustpilotBadgeClicked":
      // e.data.instanceId
      break;

    case "greenleaze:conditionsLinkClicked":
      // e.data.url
      // e.data.instanceId
      break;

    case "greenleaze:callButtonClicked":
      // e.data.value
      // e.data.instanceId
      break;

    case "greenleaze:footerActionClicked":
      // e.data.instanceId
      break;
  }
});

Complete payload example

A full data payload combining all widget elements.

{
  "title": [
    { "text": "Your subscription with " },
    { "text": "GreenLeaze", "color": "#0d5537", "bold": true }
  ],
  "buttonMode": "both",
  "subscribeButton": {
    "label": "Subscribe",
    "style": "background:#0d5537;border-radius:10px"
  },
  "bookingButton": {
    "label": "Book now",
    "style": "background:transparent;color:#0d5537;border:2px solid #0d5537;border-radius:10px"
  },
  "arguments": [
    {
      "label": "Theft / breakage warranty available",
      "icon": "https://cdn.example.com/warranty.svg"
    },
    {
      "label": "12-month warranty included",
      "icon": "https://cdn.example.com/shield.svg"
    },
    {
      "label": "French support 6/7 days",
      "icon": "https://cdn.example.com/support.svg"
    },
    {
      "label": "More than 8000 satisfied customers",
      "icon": "https://cdn.example.com/customers.svg"
    }
  ],
  "trustpilotBadge": {
    "rating": 4.6,
    "reviewCount": 1106,
    "clickable": true
  },
  "conditionsLink": {
    "label": "View conditions",
    "link": "https://your-shop.com/conditions"
  },
  "callButton": {
    "label": "Call our experts",
    "value": "tel:+33123456789",
    "icon": "https://cdn.example.com/phone.svg"
  },
  "modalFooter": {
    "labelOne": "Did you know your employer can fund part of your rental?",
    "labelTwo": "Up to €900 with the FMD scheme.",
    "buttonLabel": "Learn more →"
  },
  "illustrationBackgroundColor": "#f5f6f7",
  "durationSelector": "buttons"
}

window.addEventListener("message", (e) => {
  switch (e.data.type) {
    case "greenleaze:submitGreenleazeModal":
      // e.data.action ("subscribe" | "booking"), e.data.duration, e.data.instanceId
      // for "booking", redirect to the bookingUrl returned at transaction creation
      break;
    case "greenleaze:trustpilotBadgeClicked":
      // e.data.instanceId
      break;
    case "greenleaze:conditionsLinkClicked":
      // e.data.url, e.data.instanceId
      break;
    case "greenleaze:callButtonClicked":
      // e.data.value, e.data.instanceId
      break;
    case "greenleaze:footerActionClicked":
      // e.data.instanceId
      break;
  }
});