To pre-populate the fields on your sign-up embed, you can use registration defaults in four different ways. The data for these defaults can come from various sources, like form inputs, URL parameters, user sessions, or any other data available in your application.

👉 To pre-populate fields in a lead capture form, use leadCapture.registrationDefaults.
👉 To pre-populate fields in a support ticket form/embed, use support.formDefaults.
👉 To pre-select a plan, see the custom pricing table demo

🚀 Jump straight to the demo to see registration defaults in action!

Four Ways to Set Registration Defaults

  1. Data Attributes - Add directly to embed html
  2. Query Parameters - Encode defaults in URLs
  3. JavaScript API - Programmatic control with Outseta.auth.open()
  4. Script Options - Global defaults for all forms

Prerequisites

For the first three methods, it's assumed that you already have the Outseta Options and Script in your site's <head> element. It should look something like:

<!-- Outseta Script Options -->
<script>
  var o_options = {
    domain: '[your-domain].outseta.com'
  };
</script>

<!-- Outseta Script (doing all the magic) -->
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>

For all four methods, it's assumed there is an account custom property with system name Maskot.

1. Data Attributes

Add data-registration-defaults directly to your pop-up Outseta embed button:

<!-- Registration embed with data attributes -->
<button data-o-auth="1"
     data-widget-mode="register"
     data-mode="popup"
     data-registration-defaults='{"Person":{"Email":"[email protected]","FirstName":"John","LastName":"Smith"},"Account":{"Name":"TechStartup Inc","Maskot":"Dragon"},"Subscription":{"DiscountCouponSubscriptions":[{"DiscountCoupon":{"UniqueIdentifier":"LAUNCH25"}}]}}'
>Signup</button>

2. Query Parameters

Add registrationDefaults as a query parameter when using the URL approach.

https://snippets.outseta.com/auth?widgetMode=register&registrationDefaults=%7B%22Person%22%3A%7B%22Email%22%3A%22john%40techstartup.com%22%2C%22FirstName%22%3A%22John%22%2C%22LastName%22%3A%22Smith%22%7D%2C%22Account%22%3A%7B%22Name%22%3A%22TechStartup%20Inc%22%2C%22Maskot%22%3A%22Dragon%22%7D%2C%22Subscription%22%3A%7B%22DiscountCouponSubscriptions%22%3A%5B%7B%22DiscountCoupon%22%3A%7B%22UniqueIdentifier%22%3A%22LAUNCH25%22%7D%7D%5D%7D%7D#o-anonymous

💡 To encode your JSON for URL parameters, you can use an online tool like URLEncoder.org or JavaScript's built-in encodeURIComponent() function.

The URL-encoded JSON above represents this data structure:

{
  "Person": {
    "Email": "[email protected]",
    "FirstName": "John",
    "LastName": "Smith"
  },
  "Account": {
    "Name": "TechStartup Inc",
    "Maskot": "Dragon"
  },
  "Subscription": {
    "DiscountCouponSubscriptions": [
      { "DiscountCoupon": { "UniqueIdentifier": "LAUNCH25" } }
    ]
  }
}

3. JavaScript API

Use Outseta.auth.open() to programmatically open registration forms with specific defaults.

<!-- Trigger registration with JavaScript -->
<button onclick="openRegistration()">Sign Up Now</button>

<script>
  function openRegistration() {
    Outseta.auth.open({
      widgetMode: 'register',
      registrationDefaults: {
        Person: {
          Email: '[email protected]',
          FirstName: 'John',
          LastName: 'Smith'
        },
        Account: {
          Name: 'TechStartup Inc',
          Maskot: 'Dragon'
        },
        Subscription: {
          DiscountCouponSubscriptions: [
            { DiscountCoupon: { UniqueIdentifier: 'LAUNCH25' } }
          ]
        }
      }
    });
  }
</script>

4. Outseta Script Options

Add auth.registrationDefaults to your Outseta Script Options. This method applies the same defaults to all registration forms on the page.

<!-- Outseta Script Options -->
<script>
  var o_options = {
    domain: '[your-domain].outseta.com',
    // ✨ Add the relevant lines below to your current options
    // ✨ to pre-populate fields in your sign up form/embed.
    auth: {
      registrationDefaults: {
        Person: { 
          Email: '[email protected]',
          FirstName: 'John',
          LastName: 'Smith'
        },
        Account: {
          Name: 'TechStartup Inc',
          // You may even set a value for a custom property
          Maskot: 'Enterprise Plan',
        },
        Subscription: {
          DiscountCouponSubscriptions: [
            { DiscountCoupon: { UniqueIdentifier: "LAUNCH25" } }
          ]
        },
      }
    }
  };
</script>

<!-- Outseta Script (doing all the magic) -->
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>

Full demo on Code Sandbox