Install survey widget in a Magento website

Magento uses a module loader (RequireJS) to load JS scripts on the website. That means that the default installation option we suggest - i.e. pasting a <script> block with the widget code anywhere on the page - may not work for you.

Luckily, the workaround is pretty straightforward.

Step 1

Create a new JS script SatisMeter-widget.js in the directory you keep your other scripts - e.g. app/code/Magento/Theme/view/frontend/web/js and fill it with the following content:

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

Replace the WRITE_KEY with your project's write-key, which can be found in Settings > Integrations > API Keys.

You can also add user data - user ID and user traits - to the SatisMeter function call, like in the example below:

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

Add the script to your RequireJS config dependencies - e.g. app/code/Magento/Theme/view/frontend/requirejs-config.js. Your script might have a different path, depending on your project structure.

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

Now the script should be loaded with the rest of the dependencies and once it is loaded - check the targeting and show the survey to the user.

If you still struggle with the setup, please let us know and we will help you set this up.