Custom form

To use your own sign-up form you simply need to call Maître's form.submit() method and send the user information such as email address and name.

var data = {
	name: "John Smith",
	email: "john@smith.com",
	extra_field: "+1 123456789",
	extra_field_2: USA"
};
Maître.form.submit(data);

NOTE: "email" is required and can't be blank.
IMPORTANT: You must include the Maître Tracking Code to the page for this to work. 

Below you can find an example of how to use Maître with your own form.

Full example

Let's assume you're currently using a sign-up form like the one below:

<form action="#" method="POST" id="my-form">
  <input type="text" id="name" name="name" placeholder="Your name">
  <input type="email" id="email" name="email" placeholder="Your email">
  <input type="submit" value="Submit">
</form>

You could then send the sign-up data to Maître like this:

<script type="text/javascript">
  document.getElementById("my-form").addEventListener("submit", function(e) {
    e.preventDefault();
    data = {
      name: document.getElementById("name").value,
      email: document.getElementById("email").value
    };

    Maitre.form.submit(data);
  });
</script>

After you submit the data you probably want to give people their referral link and display other useful information. Below we explain the different options you have.

Sharing screen in popup

If you have selected "Open sharing screen in popup" in your campaign settings (which is the default option), then the default sharing screen will automatically pop up. This option is perfect for those who want to use their own sign-up form but don't to spend too much time on the customization and are happy to use Maître's default sharing screen.

Sharing screen inline

If you want to display the sharing screen inline, things are slightly more complicated because Maître does not know where to display the sharing screen. Luckily you can tell Maître where you want the sharing screen to appear using Maître's Configuration file.

<script type="text/javascript">
  window.MaitreConfig = {
    defaults: {
      sharing_screen_container_id: "maitre-sharing" // The ID of the HTML container
    }
  }
</script>

Custom sharing screen

Alternatively, you can decide to create your own sharing screen and customize the whole experience.
Be aware that this approach will take considerably longer to implement (although it will give you greater flexibility).

To create your own sharing screen you must use the Success callback to completely override the default behaviour (which is to display the sharing screen).

To use a callback you must initialize the Maître Configuration File BEFORE the Maître Tracking Code. In our case we want to use the callback success, which is triggered after the form is submitted or  Maitre.form.submit() is called:

<script type="text/javascript">
  window.MaitreConfig = {
    callbacks: {
      success: function(response, data) {
        // Your custom logic
      }
    }
  }
</script>

<!-- start Maitre tracking code -->
  <script type="text/javascript"> ...</script>
<!-- end Maitre tracking code -->

As you can see the callback success has two parameters: "response" and "data".

"response" is a string that can have one of the following values:

  • "subscriber_created" (when the call creates a new subscriber)
  • "subscriber_retrieved" (when the call retrieves an existing subscribers)
  • "subscriber_not_verified" (when the call retrieves a subscriber who has not verified their email address)
  • "subscriber_not_found" (when the call returns 0 results)
  • "email_not_valid" (when the email submitted is not valid)
  • "error" (if there's has been an error).

"data" is a JSON object containing the data of the subscriber (unless "response" is error).

You can then use the subscriber's data (especially the "referral_link") to create your custom UI; for example, you can display a button to share on Twitter with a pre-composed tweet or store that information into your own database to send an email later.

You can see a working example of such implementation here: https://jsfiddle.net/6nca4572/5/

Still need help? Contact Us Contact Us