This section explains how you can use APIs exposed from the Greenback widget to trigger some actions.

Actions

Window:sendGreenbackMessage() Method

The window.sendGreenbackMessage() method accepts data input and will trigger the Greenback widget to send a message to the AI

Syntax

window.sendGreenbackMessage({trigger: 'default'}) // It will open the chat modal without sending message
window.sendGreenbackMessage({message: 'Show me green dresses', trigger: 'pdp'})
window.sendGreenbackMessage({message: 'Show me green dresses', trigger: 'default'})
window.sendGreenbackMessage({message: 'Show me green dresses', trigger: 'pdp', source: 'size button'})

Parameters

Name	Required	Data Type	Example	Explain

Name

Required

Data Type

Example

Explain

message

No

string

Show me some blue dresses

The message field is a text that will be sent to the AI.

trigger

Yes

pdp | default

default

Trigger indicates where we are passing the data. There are two options “pdp” and “default”.

pdp: data passing to pdp and message will show up in pdp.
default: data passing to chatbot
1. Show the message in the chatbot.
2. When the message field is empty and the chatbot is closed. It will open the chatbot without sending a message except the greeting message.
3. open the chatbot if it is not already opened.

source

No

string

Size Button

The source field is an optional field to indicate what has triggered this action.

E.g. source: “size button” meaning the size button triggered this action

Note: when the trigger is default and the message is empty, it will open the chat modal if it is not already open, and it will not send message

Implementation

The Greenback widget exposes an API to allow customers to use it on the page. To use the API, customers need to pass in the correct data structure with the required fields.

Example in Shopify

Identify the Button
Locate the button in your Shopify theme. You can find it in a specific Liquid file, such as main-product.liquid, cart.liquid, or a section file in the Sections folder.
Add a Unique Identifier
Modify the button's HTML to include a unique id or class attribute if it doesn’t already have one. For example:
<button id="greenback-trigger-button" class="btn">Click Me</button>
Write the JavaScript
You can add your custom JavaScript code to the theme.js or custom.js file, typically located in the Assets folder.
Example:
document.addEventListener('DOMContentLoaded', function () { const customButton = document.getElementById('greenback-trigger-button'); if (customButton) { customButton.addEventListener('click', function () { window.sendGreenbackMessage({ message: 'Show me green dresses', trigger: 'pdp', source: 'custom button' }) }); } });
Include the JavaScript in Your Theme
If the file is not already included in your theme, ensure you load it in the theme.liquid file by adding this line before the closing </head> tag:
Save and Preview

Note: The event trigger only works when the required fields exist.

Test without a developer

You can test without modifying the code

Inspect the page
Go to the page that has the Greenback widget on. Right-click on the page and click on inspect. It opens up the devtool panel. Then click on the console tab within the dev tool panel.
Call the method
Within the console panel copy and paste the sample code below and feel free to change the text within the double quote.
Press enter once you are satisfied with the data you input in
See message gets passed to Greenback

Greenback Handbook

Greenback External Trigger Widget AP Integration

Analytics