Install survey widget in a Magento website

Magento uses a module loader called RequireJS to load JavaScript (JS) files on your website. Because of this, our default installation option may not work for you. That option is pasting the snippet as a <script> block anywhere on the page.

The workaround is straightforward and takes two steps.

Step 1: Creating the widget script

In the directory where you keep your other scripts, create a new JS file named SatisMeter-widget.js. For example, use app/code/Magento/Theme/view/frontend/web/js. Add the following content to the file:

define(["https://app.satismeter.com/satismeter.js"], function () {
  satismeter({
    writeKey: "WRITE_KEY"
  });
});

Replace WRITE_KEY with your project's write key. You can find it in Settings > Integrations > API Keys.

You can also add user data, such as the userId and user traits, to the satismeter() function call, as in this example:

define(["https://app.satismeter.com/satismeter.js"], function () {
  satismeter({
    writeKey: "WRITE_KEY",
    userId: "1234",
    traits: {
      name: "John Doe",
      email: "john@doe.com",
      createdAt: "2020-10-25T12:55:15.953Z"
    }
  });
});

Step 2: Adding the script to your RequireJS config

Add the script to the dependencies in your RequireJS config, for example app/code/Magento/Theme/view/frontend/requirejs-config.js. Your script's path may differ, depending on your project structure.

var config = {
  // ... the rest of the config
  deps: [
    // ... the existing dependencies
    "Magento_Theme/js/satismeter-widget"
  ]
};

The script now loads with the rest of your dependencies. Once it loads, it checks your targeting and shows the survey to the user.

If you still have trouble with the setup, contact support and we'll help you set it up.