Explicit form rendering

By default, forms are rendered automatically as soon as the script and its dependencies load. If you wish to gain more control over form rendering, additional configuration is required.

---

Resource parameters

Explicit form rendering can be achieved by specifying additional parameters to the JavaScript resource URL.

explicit=true

Prevents automatic form rendering. Forms will have to be rendered manually by calling senderForms.render(). See Form render methods below.

onload=yourCustomCallback

Specifies the name of a function to be executed once forms are ready to be rendered. To avoid a race condition, declare the function before the forms script.

<script>
  function yourCustomCallback() {
    // your code
  }
</script>

<script>
(function (s, e, n, d, er) {
    s['Sender'] = er;
    s[er] = s[er] || function () {
      (s[er].q = s[er].q || []).push(arguments)
    }, s[er].l = 1 * new Date();
    s[er].on = function(event, callback) {
            s[er].listeners = s[er].listeners || {};
            (s[er].listeners[event] = s[er].listeners[event] || []).push(callback);
    };
    var a = e.createElement(n),
        m = e.getElementsByTagName(n)[0];
    a.async = 1;
    a.src = d;
    m.parentNode.insertBefore(a, m)
  })(window, document, 'script', 'https://cdn.sender.net/accounts_resources/universal.js?explicit=true&onload=yourCustomCallback', 'sender');
  sender("YOUR_ACCOUNT_PUBLIC_ID");
</script>

---

Forms load listener

There are two additional ways to be notified when form render methods are initialized.

senderFormsLoaded

A global boolean property. Is true when form render methods are available, false otherwise.

onSenderFormsLoaded

An event dispatched on Window when form render methods become available.

if (!window.senderFormsLoaded) {
  window.addEventListener("onSenderFormsLoaded", function () {
    // your code
  });
} else {
  // do something right away
}

---

Form render methods

Methods to render and toggle forms. All methods below belong to the global senderForms object.

render(forms, config)

Renders target forms that meet render conditions.

enable(forms)

Enables target forms functionality if conditions are met.

disable(forms)

Disables target forms functionality. If called on an open popup, the action is deferred until the popup is closed.

destroy(forms)

Destroys target form instances and removes them from the DOM. Call this when a form is no longer needed to avoid memory leaks.

Arguments

All arguments are optional.

forms

Accepted values: "all" (default), or a form ID string or array of form ID strings. You can find a form’s ID in its settings.

config

An optional object containing the following properties:

Property	Type	Description
initialStatus	"enabled" | "disabled"	Sets the initial status of the form when it renders.
onRender	Function	Called when a form renders. Receives the rendered form’s ID as an argument.

senderForms.render(["someId", "anotherId"], {
  initialStatus: "disabled",
  onRender(formId) {
    // do something with the rendered form
  },
});

---

Helper methods

getStatus(formIDs)

Accepts a form ID as a string or an array of strings. Returns an object containing the status of each requested form.

var formStatus = senderForms.getStatus("someId");
console.log(formStatus); // { someId: "enabled" }

---

Form statuses

Status	Description
"unavailable"	The form’s instance has not been created.
"initialized"	The form’s instance is created but is not yet rendering or in the DOM.
"rendering"	The form is currently being rendered.
"enabled"	The form is rendered and ready to be used.
"disabled"	The form is rendered but cannot be used.

---

Render conditions

Embedded forms — the target HTML snippet must be present in the DOM for the form to render.

Popup forms — one or more display conditions must be met: the visitor is not yet subscribed, is on the correct page, there are elements to bind the popup open event to, etc.