Let the Outseta script monitor DOM changes for you and attach the embeds to the configured dom elements when they appear.

This will typically be useful in a Single-Page Application (SPA) setting or when using JS to create elements on the fly.

Below are the changes you'd need to make to the Outseta Configurations that should already be in your site's head.

<!-- Outseta Configuration -->
<script>
  var o_options = {
    domain: "[your-subdomain].outseta.com",
    monitorDom: "true",
  };
</script>

<!-- Outseta External Script -->
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>

Auth embeds

By default, you'll get a combined signup and login form. However, you may use the widget mode data attribute to specify the auth mode:

<div data-o-auth="1" data-mode="embed"></div>

or 

<div data-o-auth="1" data-mode="embed" data-widget-mode="login"></div>
<div data-o-auth="1" data-mode="embed" data-widget-mode="register"></div>

Profile embed

By default, the profile embed opens in the profile tab. However, you may use the tab data attribute to select a different tab to open initially:

<div data-o-profile="1" data-mode="embed"></div>

or

<div data-o-profile="1" data-mode="embed" data-tab="billing"></div>
<div data-o-profile="1" data-mode="embed" data-tab="account"></div>
<div data-o-profile="1" data-mode="embed" data-tab="profile"></div>

👉 All available options are listed in the JavaScript configuration guide

Other embeds

The same applies to lead capture, email signup, and support forms; see the React embed forms demo below.

React embed forms demo

In this demo, React changes the DOM. View the full demo on CodeSandbox.

Custom auth popups VanillaJS demo

In this demo, Vanilla JS changes the DOM by creating and opening custom popups. View the full demo on CodeSandbox.