Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 6 Next »

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
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

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”.

  1. pdp: data passing to pdp and message will show up in pdp.

  2. default: data passing to chatbot

    1. Show the message in the chatbot.

    2. 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 trigger is default and message is empty, it will open the chat modal if it is not already open

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

  1. 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.

  2. 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>

  3. 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'
            })
        });
    }
});

  4. 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:

    <script src="{{ 'custom.js' | asset_url }}"></script>

  5. 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

  1. 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.

  2. 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.

    window.sendGreenbackMessage({
    message: "show me green dresses",
    trigger: "default",
})

    Press enter once you are satisfied with the data you input in

  3. See message gets passed to Greenback

  • No labels