Versions Compared

Version Old Version 3 New Version Current
Changes made by

Andy Jiang

Andy Jiang

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Actions

...

Action

...

Action Data Structure

...

Example

Window:sendGreenbackMessage() Method

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

Syntax

Code Block
languagejs
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

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

Info

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

  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:

    Code Block
    <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:

    Code Block
    languagejs
    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:

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

  5. Save and Preview

Info

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.

    Image Added

  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.

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

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

    Image Added

  3. See message gets passed to Greenback

    Image Added