Javascript API

Once you have Tuemilio installed on your website, you can interact programmatically with it. Below is a list of all available methods you can use and all the events you can listen to.

Methods

These methods allow you to interact with your waitlist programmatically. Adding new subscribers, fetch the subscriber's dashboard data, and even fire some confetti.

Initialization

Tuemilio('init', {
    form: {
        disabled: true // If you plan to use a full custom email form.
    },
    dashboard: {
        disabled: true // If you plan to create a full custom subscriber's dashboard.
    }
});

The 'init' is always required for Tuemilio to work. It already comes in the form code. It initializes all the components of the widget and sets the configuration. Check the full list of configuration options.

Argument Object

TIP

If you plan to create your custom form and/or dashboard, remember to disable the form and/or dashboard, as in the example above. Otherwise, the native UI of Tuemilio will interact with your landing.

Send Visit

Tuemilio('sendVisit');

The 'sendVisit' method is required for the correct functionality of Tuemilio. This method comes already in your form code and tracks the page views of your landings. It doesn't accept any argument.

Event Listeners

Add Subscriber

Tuemilio('createSubscriber', {
    address: 'hello@domain.com',
    referralId: 'xBg3' // Optional
});

With 'createSubscriber', you can add a subscriber to your list. The only item you need to pass in the argument object is address

Argument Object

  • address: String|Required Subscriber's email.
  • referralId: String The referrer subscriber's ID. Will be set automatically, if the parameter is in the URL like example.com?referrerId=xBg3

Event Listeners

Get Dashboard

Tuemilio('getDashboard', {
    address: 'hello@domain.com'
});

Request the dashboard object from a specific subscriber. Listen to the event OnDashboardData to make use of the data.

Argument Object

  • address: String Subscriber's email. Not required, but recommended if you have access to the subscriber's email.

Event Listeners

TIP

The dashboard data is already available in these cases:

  • After calling createSubscriber, the event onDashboardData is fired.
  • When the Tuemilio cookie identifies a subscriber, the method getDashboard runs automatically. Again listen to the event onDashboardData to make use of the dashboard object.

Use the getDashboard method only when you are not in any of those cases.

Show Dashboard

Tuemilio('showDashboard');

Dashboard type:

  • Modal: it opens the popup that contains the dashboard.
  • Page: it embeds the dashboard container on the page.

If you set in your waitlist settings a URL to redirect to, this method will fire the redirection.

Event Listeners

WARNING

Use this method only when the dashboard is not disabled. Nothing will show if disabled.

Close Modal

Tuemilio('closeModal');

It closes the dashboard popup, if it is opened.

Event Listeners

Redirect

Tuemilio('redirect', url);

It redirects to the specified URL.

Argument Object

  • url: String|required

Fire Confetti

Tuemilio('confetti');

It fires two cannons of confetti.

Events

On Visit Created

Each time someone visits your site, a page view is sent to Tuemilio. If the visitor is already subscribed and identified, you'll find the subscriber's information inside the visitObject.

Tuemilio('onVisitCreated', function (visit){
    // 
});

Available data: visitObject

On Subscriber Created

Get the subscriberObject when a subscriber joins the waitlist.

Tuemilio('onSubscriberCreated', function (subscriber){
    // 
});

Available data: subscriberObject

On Subscriber Identified

Get the subscriberObject when a subscriber visits your page, and he/she is identified.

Tuemilio('onSubscriberIdentified', function (subscriber){
    // 
});

Available data: subscriberObject

On Subscriber Unidentified

Event fired when visitors visit your page, and they are not subscribed.

Tuemilio('onSubscriberUnidentified', function (){
    // 
});

Available data: None

On Subscriber Unauthorized

Fired when an already subscribed user tries to login with other email addresses.

Tuemilio('onSubscriberUnauthorized', function (error){
    console.log(error) // { "message": "Unauthorized login" }
});

Available data: Error message

On Subscriber Unaccepted

Fired when the server does not accept the email address because of disposable email or invalid address.

Tuemilio('onSubscriberUnaccepted', function (error){
    console.log(error) // {"message":"The given data was invalid.","errors":{"address":["The address domain is invalid."]}} 
});

Available data: Error message

On Dashboard Data

Fired when a subscriber is created, identified, or a dashboard request has been made. Use this event to build a fully custom dashboard.

Tuemilio('onDashboardData', function (dashboard){
    // Build a fully custom dashboard now
});

Available data: dashboardObject

On Dashboard Shown

Fired when the dashboard is shown to the subscribers or when they open it.

Tuemilio('onDashboardShown', function (){
    // 
});

Available data: None

On Dashboard Closed

Fired when the dashboard is closed by the subscriber.

Tuemilio('onDashboardClosed', function (){
    // 
});

Available data: None

On Survey Submitted

Fired when subscribers complete the survey.

Tuemilio('onSurveySubmitted', function (){
    Tuemilio('confetti')
});

Available data: None

On Invalid Email

Fired when subscribers try to submit an invalid email

Tuemilio('onInvalidEmail', function (input){
    // 
});

Available data: Malformed email address as a string

On Empty Email

Fired when subscribers try to submit an empty email.

Tuemilio('onEmptyEmail', function (){
    // 
});

Available data: None

On Error

Fired when the server responds with an error

Tuemilio('onError', function (error){
    // 
});

Available data: Server error message

Objects

Config Object

We can pass a set of configurations to our waitlist when we are initializing it.

Tuemilio('init', configObject);

There is a few settings that need to be set programmatically and cannot be set from our dashboard. Here are all the possible settings and their default value.

let configObject = {
  form: {
    disabled: false, // true for disabling the form
    loginFormOnUserIdentified: false,
    forceLoginForm: false,
    style: {
      inline: false, // true for inline style
    },
    feedback: {
      texts: {
        resentConfirmationEmail: 'Sent' // Translate response message when a confirmation email has been sent.
      }
    }
  },
  dashboard: {
    type: 'modal', // set as 'page' for embedding the dashboard on the page 
    disabled: false, // true for disabling the dashboard
    hideButton: false, // true for hiding the dashboard button
    loadOnUserIdentified: true, // set to false if accepts as many emails as possible, it "doesn't" remember the user.
    modal: {
      preventShowAfterSubscribing: false, // true for not showing the dashboard after subscribing
      preventShowAfterLogin: false, // true for not showing dashboard for already subsribed users
    },
    listAnimation: true, // false for disabling dashboard animations
    survey: {
        secondURL: 'https://domingo18.typeform.com/to/lER1jh' // Show a second survey after the main one has been completed
    },
  },
  cookies: {
    disabled: false // false for disabling cookies
  },
  user: {
    identified: false
  },
  confetti: {
    disabled: false // true for disabling confetti
  }
}

Dashboard Object

This is the JSON response you get from the onDashboardData event. You can use it to build a fully custom dashboard.

{
  "subscriber": {
    // Subscriber Object
  },
  "referreds": [ // Referred friends
    {
      "points": 3,
      "created_at": "6 months ago",
      "user": "david"
    },
    {...}
  ],
  "referreds_count": 5,
  "position": 3, // Subscriber's position
  "subscriber_count": 1060,
  "waiters": [ // Leaderboard
    {
      "address": "p×××××@××.com",
      "points": 7,
      "position": 1,
      "pulse": [...]
    },
    {...}    
  ],
  "shareds": [ // Social platforms the subscriber has shared the link.
    {
      "name": "Twitter",
      "visits_count": 14 // How many visits has the subscriber attracted in that platform.
    },
    {...}
  ],
  "config": {
    "video_url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ", // URL of the video card.
    "gif_url": "https://media.giphy.com/media/1Z02vuppxP1Pa/giphy.gif", // URL of the gif/image card.
    "typeform_url": "https://domingo18.typeform.com/to/lPlp6Ynn", // Typeform URL of the survey card .
    "objective_max": 10, // Goal points for the objective card.
    "redirect": 0, // Redirect on/off.
    "redirect_url": "https://www.yourapp.com/dashboard", // URL of the redirect.
    "ends_at": "2019-05-15 22:13:00" // End date of the Campaign for the countdown card.
  },
  "rates": {
    "shareon_point_rate": 1, // Points given foreach platform where it is shared.
    "referrer_point_rate": 4, // Points for each friend invited.
    "survey_point_rate": 1 // Points for answering the survey.
  }
}

Visit Object

{
  "ga_enabled": 0,
  "redirect_url": "https://www.yourapp.com/dashboard",
  "redirect": 0,
  "subscriber": {
    // Subscriber Object
  }
}

Subscriber Object

{
  "id": 124332, 
  "address": "john@example.com",
  "blocked": 0,
  "created_at": "2018-10-30 15:14:55",
  "custom_fields": null,
  "points": 5,
  "referrer_id": 143809,
  "referrer_url": "https://t.co/9ny8nokfgn",
  "dashboard_link": "https://www.yourapp.com?email=john@example.com",
  "surveys": [
    {
      "type": "typeform",
      "created_at": "2019-05-17 19:29:14"
    }
  ]
}

React / Next.js

Installation

Here you can find a basic integration of the Tuemilio widget on a React or Next.js project.

You'll need to extract the Javascript inside the <script>...</script> tag of your form code and insert it on a useEffect hook as shown below. The HTML of your form code should be added to the jsx of your component.

This way Tuemilio will be installed globally on the browser and you can call any Tuemilio('...') function wherever you need. Check this example.

WARNING

Make sure that if you copy and paste this example, you'll need to replace t[m].id=XXXXXXXXX with your Widget List UUID.

import { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    return () => {
      if (typeof window !== 'undefined') {
        (function(t,u,e,m,i,l,io){
          t['TuemilioObject']=m;t[m]=t[m]||function(){(t[m].q=t[m].q||[]).push(arguments);};
          t[m].id='XXXXXXXXX';l=u.createElement(e),io=u.getElementsByTagName(e)[0];
          l.id=m;l.src=i;l.async=1;io.parentNode.insertBefore(l,io);
        }(window,document,'script','Tuemilio','https://tuemilio.com/assets/js/modal/4.0/tuemilio-modal.js'));
        Tuemilio('init', {});
        Tuemilio('sendVisit');
      }
    }
  }, []);

  return (
    <div>
      <div className="t-signup"></div>
    </div>
  )
}

WARNING

You'll find some rendering issues during hot reloading or while editing your React component. When you see this, manually reload the browser.