Show Developer Menu

Delayed Shoutbox Triggers

Problem Description

By default the Reamaze shoutbox trigger renders as soon as the page loads. Sometimes you'd rather keep it hidden until a specific system event occurs — a button click, an application state change, or a milestone like "checkout complete". This lets you introduce the shoutbox at exactly the right moment instead of showing it to everyone immediately.

Reamaze only initializes the shoutbox on page load. If the shoutbox starts hidden, you can reveal it later with a single JavaScript call. Reamaze.js acts idempotently, so calling it more than once is not a problem.

Prerequisite Code

Make sure you have the Reamaze.js snippet installed from the Installation Step.

Keep the Shoutbox Hidden on Load

Set the widget flag to false so the shoutbox trigger does not render when the page loads.

<script type="text/javascript">
  _support['ui']['widget'] = false;
</script>

Copy and place the above code anywhere in your HTML, after the Reamaze.js snippet.

Important: hiding the trigger does not stop Reamaze from loading. With widget = false, Reamaze.js still initializes on page load and makes its normal startup requests. This flag only controls whether the trigger button is displayed. If your goal is to avoid any network activity or data collection until the visitor consents, see Load Reamaze Programmatically below.

Reveal the Shoutbox on Your Event

When your system event fires, set the flag to true and call Reamaze.reload(). Reamaze re-reads its configuration and renders the shoutbox trigger.

<script type="text/javascript">
  function showReamazeShoutbox() {
    _support['ui']['widget'] = true;
    Reamaze.reload();
  }
</script>

<button onclick="showReamazeShoutbox()">Need help?</button>

Wire showReamazeShoutbox() into any event you like — a button click, a router transition, or a callback from your own application code.

Load Reamaze Programmatically

Sometimes you need to control the exact moment Reamaze loads — for example, only after a visitor grants consent, or after some other event in your app. Instead of letting the install snippet load Reamaze on page load, wrap the part that adds the script in a function and call it when your event fires. Until you call it, Reamaze is never added to the page and makes no requests.

Keep the configuration lines from the Installation Step on the page as-is, and move only the script tag into a loader function:

<script type="text/javascript">
  function loadReamaze() {
    if (window._rmzLoaded) return; // load once
    window._rmzLoaded = true;

    var s = document.createElement('script');
    s.async = true;
    s.src = 'https://cdn.reamaze.com/assets/reamaze.js';
    document.head.appendChild(s);
  }
</script>

Then call loadReamaze() from whatever event should start Reamaze. The snippet below shows three examples — they will not work if pasted verbatim. The element IDs and event names are placeholders you must replace with your own.

<script type="text/javascript">
  // EXAMPLE — replace the IDs and event names below with your own.

  // 1. After a visitor grants consent (Shopify Customer Privacy API).
  //    Only applies if your store uses Shopify's consent API.
  document.addEventListener('visitorConsentCollected', function(e) {
    if (e.detail && e.detail.analyticsAllowed) loadReamaze();
  });

  // 2. From your own cookie banner or button — swap 'accept-cookies'
  //    for the real id of your consent button.
  document.getElementById('accept-cookies')
    ?.addEventListener('click', loadReamaze);

  // 3. On any other system event — swap 'checkout:complete' for the
  //    event your app actually dispatches.
  window.addEventListener('checkout:complete', loadReamaze);
</script>

Before this works, you must:

• Keep your account configuration from the Installation Step inline on the page.
• Replace accept-cookies with the real element id of your consent button, and checkout:complete with the event your app dispatches.
• Use only the trigger that fits your setup — the Shopify example applies only if you use Shopify's Customer Privacy API.

Once Reamaze has loaded you can open the shoutbox on demand with Reamaze.popup() — see Custom Triggers.

Notes

Reamaze.reload() is idempotent, so calling it repeatedly is safe. See Single Page Applications for more on reinitialization.

If you need to run code only after Reamaze has initialized, listen for the "Reamazeinit" CustomEvent. It is emitted on every load, so if you call Reamaze.reload() inside that handler you must set a flag to avoid a loop. See Custom Triggers for details, including Reamaze.popup() for proactively opening the shoutbox or a help article.

Next Step

To track visitor and shoutbox activity with custom events, see Analytics & Events.

Next: Analytics & Events →