# 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

• configuration object

# 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

• OnVisitCreated
• OnDashdoardData If the subscriber is identified, getDashboard is called automatically.
• OnSubscriberIdentified
• OnSubscriberUnidentified
• OnSubscriberUnaccepted
• OnError

# 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

• OnDashdoardData
• OnSubscriberCreated
• OnSubscriberIdentified
• OnSubscriberUnauthorized
• OnSubscriberUnaccepted
• OnError

# 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

• OnDashdoardData
• OnSubscriberUnauthorized
• OnError

# 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

• OnDashdoardShown

# Close Modal

Tuemilio('closeModal');

It closes the dashboard popup, if it is opened.

Event Listeners

• OnDashboardClosed

# 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.

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>
  )
}