HTML & WordPress

What works

1. Add analytics to every page

In the <head>. Pageviews appear within seconds of the first visit.

<script
  src="https://dev.userlily.com/v1/tracker.js"
  data-tracking-id="YOUR_TRACKING_ID"
  async>
</script>

2. Add the widget and web push

Just before </body>, on every page. Leave out the products you do not use.

<script
  src="https://dev.userlily.com/v1/widget.js"
  data-campaign-id="YOUR_CAMPAIGN_KEY"
  async>
</script>
<script defer
  data-project="YOUR_PROJECT_KEY"
  src="https://dev.userlily.com/v1/broadcast.js"></script>

3. Send custom events

From any page. window.userlily exists once the tracker has loaded - well before anyone can submit a form.

<script>
  document
    .querySelector('#signup-form')
    .addEventListener('submit', function () {
      window.userlily.track('signup_completed')
    })
</script>

4. Show the review badge

The badge renders exactly where the tag sits. Switch on “Enable syndication” on the campaign’s Syndication page first.

<script src="https://dev.userlily.com/v1/syndication.js" data-token="YOUR_CAMPAIGN_KEY" async></script>

5. Host the push worker

The worker must be served from your own domain at /userlily-sw.js, as JavaScript, with no redirect and over HTTPS. Each of these fails silently. Download it and upload it to your site root - on WordPress, the folder holding wp-config.php.

https://dev.userlily.com/v1/userlily-sw.js

6. Ask for push permission from your own button

Optional. Works when the project’s “When to ask” is set to “Only when your own code asks”.

<button id="notify-me">Get notified</button>
<script>
  var button = document.querySelector('#notify-me')
  button.addEventListener('click', function () {
    // Exists once broadcast.js has started, and only
    // when "When to ask" is "Only when your own code asks".
    if (window.userlilyBroadcast) window.userlilyBroadcast.prompt()
  })
</script>

7. Embed the public roadmap

Turn on “Enable public roadmap” in Roadmap → Settings first. An Allowed domain on the roadmap limits which sites can embed it.

<iframe
  data-userlily-roadmap
  src="https://dev.userlily.com/r/YOUR_ROADMAP_KEY?embed=1"
  title="Product roadmap"
  style="width:100%;height:720px;border:0"
  loading="lazy"
></iframe>
<script>
(function () {
  window.addEventListener("message", function (event) {
    if (event.origin !== "https://dev.userlily.com") return;
    var data = event.data;
    if (!data || data.type !== "userlily:roadmap:height") return;
    var frame = document.querySelector("iframe[data-userlily-roadmap]");
    if (frame && data.height > 0) frame.style.height = data.height + "px";
  });
}());
</script>

8. Share links

Every campaign, survey and public roadmap also has a hosted page - nothing to install. Find each one under Share in the dashboard.

Feedback form  https://dev.userlily.com/f/YOUR_CAMPAIGN_KEY
Survey         https://dev.userlily.com/s/YOUR_SURVEY_KEY
Roadmap        https://dev.userlily.com/r/YOUR_ROADMAP_KEY

Notes