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 wait list programmatically. adding new subscribers, fetch the subscriber's dashboard data and even fire some confetti.

Initialization

Tuemilio('init', {
    form: {
        disabled: true
    },
    dashboard: {
        disabled: true
    }
});

The 'init' is always required on your code and it already comes in the snippet. It initializes all the components of the widget and sets the configuration.

Argument Object

TIP

If you plan to create your own 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 snippet 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 a subscriber is identified by the Tuemilio cookie, the method getDashboard runs automatically. Again listen to the event onDashboardData to make use of the dashboard object.

Use 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 in the page.

If you set in your wait list 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 subscribers joins the wait list.

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

Available data: subscriberObject

On Subscriber Identified

Get the subscriberObject when subscribers visits your page and they are 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 subscriber tries to login with other email address.

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 done. 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 response with any error

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

Available data: Server error message

Objects

Config Object

We can pass a set of configurations to our wait list 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
    },
    input: {
      texts: { // Texts related to the email input
        placeholder: 'name@email.com'
      }
    },
    button: {
      texts: { // Texts related to the form button
        CTA: 'Request early access',
        loading: 'Loading',
        checkDashboard: 'Dashboard',
        login: 'Login'
      }
    },
    feedback: { 
      disabled: false, // true for disabling form feedback
      texts: { // Texts related to the form feedback
        empty: 'Don\'t forget your email!',
        invalidEmail: 'Wrong email!',
        success: 'Thanks!',
        unaccepted: 'We do not accept that email',
        unauthorized: 'You did not subscribe with that email'
      }
    }
  },
  dashboard: {
    type: 'modal', // set as 'page' for embedding the dashboard in the page 
    disabled: false, // true for disabling the dashboard
    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
    texts: { // Texts related to the dashboard
      taskTitle: 'Current Task',
      taskParagraph: 'Invite people you know personally and go up on the waiting list.',
      taskCopyButton: 'Copy',
      taskCopiedButton: 'Copied!',
      taskOutro: 'Or share with:',
      leaderboardTitle: 'Leaderboard',
      leaderboardParagraph: 'This is your position on the list',
      leaderboardPosition: 'Position',
      leaderboardAddress: 'Address',
      referredsTitle: 'Friends invited',
      referredsParagraph: '',
      referredsEmpty: 'No friends',
      referredsPending: 'Pending',
      referredsUnit: 'Each Friend Invited',
      objectiveTitle: 'Objective',
      objectiveSubtitle: 'Out of your possible 10',
      objectiveCompleted: 'Completed',
      objectiveUncompleted: 'To be done',
      units: 'Points',
      surveyTitle: 'Complete the Survey',
      surveyCompleted: 'Thanks for completing the survey, you got 10 extra points.',
      surveyPending: 'Pending',
      countdownTitle: 'Launching soon',
      countdownParagraph: 'You still have this time to share with your friends',
      days: 'Days',
      hours: 'Hours',
      minutes: 'Minutes',
      seconds: 'Seconds',
      shareOnTitle: 'Shared on',
      shareOnParagraph: '',
      shareOnPending: 'Pending'
    },
    social: {
      buttons: { // false for disabling specific social buttons
        twitter: true,
        facebook: true,
        linkedin: true,
        email: true,
        whatsapp: true,
        reddit: true,
        wechat: false,
        telegram: true
      },
      texts: { // Texts related to the default message when sharing through social buttons
        facebookQuote:'I just joined this awesome waiting list!',
        twitterQuote:'I just joined this awesome waiting list!',
        hashTags: 'tuemilio,PH',
        whatsappQuote: 'I joined this, do it to:',
        redditQuote:'I just joined this awesome waiting list!',
        telegramQuote:'I just joined this awesome waiting list!',
        emailBody: 'Here is my link',
        emailSubject: 'I just joined this awesome waiting list!',
        linkQuote: 'Share the link below'
      }
    }
  },
  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 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"
    }
  ]
}