Customizing Tuemilio

Adapt the email form and the subscriber's dashboard to your needs. For doing that you would need small coding skills. But not too much, don't worry!

Styling

All the styling rules for the email form and popup are added at the end of the <head> of your website. Just right after the closing tag </head>. So any style overriding needs to be done inside the <body> tag. A good place could be just below the snippet like shown here:

<!-- Start of Tuemilio Code -->
<div class="tuemilio-form" id="8a45da-0g2f-4acc-91aa-e0hy4efe4f9"></div>
<script src="https://tuemilio.test/assets/js/modal/2.0/tuemilio-modal.js"></script>
<!-- End of Tuemilio Code -->

<style>
        .tu-modal-title {
            color: red;
        }
        .tu-modal-content {
            background-color: beige;
        }
        .tu-button {
            background-color: black;
        }
</style>

Each element has its own class you can target with your CSS rules. Use the developer tools of your favourite browser to find the class names of the elements you want to customize.

Texts

Probably you need to change the text that appears on the Tuemilio widget or the default text that appears when sharing with the social buttons. For that you would need to add the following JavaScript code with your custom texts.

<script>
    // Texts in popup dashboard
    window.addEventListener('load', function(){
        tuemilio.modal.customTexts = {
            title: ['Great!', 'You\'re on the waiting list.'],
            position: ['You are in position', 'of'],
            paragraph: 'Want early access? Skip ahead in line by referring friends!',
            taskTitle: 'Current Task',
            taskSubtitle: 'Invite people you know personally and go up on the waiting list.',
            taskCopyButton: 'Copy',
            taskOutro: 'Or share with:',
            waitListTitle: 'The waiting list',
            waitListSubtitle: 'This is your position on the list',
            waitListPosition: 'Position',
            waitListAddress: 'Address',
            waitListPoints: 'Points',
            referredsTitle: 'Invitees',
            referredsEmpty: 'No friends',
            objectiveTitle: 'Objective',
            objectiveSubtitle: 'Out of your possible 10',
            objectiveCompleted: 'Completed',
            objectiveUncompleted: 'To be done',
            units: 'Emails',
            dashboardInfo: 'Check your position later on with the following link',
        };

        // Texts from sharing buttons
        tuemilio.modal.customSocialTexts = {
            facebookQuote: 'I just joined this awesome waiting list!',
            twitterQuote: 'I just joined this awesome waiting list!',
            hashTags: 'tuemilio,aPH',
            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'
        };
    });
</script>

Behavior

When a subscriber visits your landing and he/she used the dashboard link provided when they subscribed, the popup will show automatically. If you want to prevent that and make the user click to display his/her dashboard, use the following code below.

<script>
    window.addEventListener('load', function(){
        tuemilio.modal.hidePopupFromDashboardLink = true;
    });
</script>

Fire the dashboard popup

Always fire the dashboard popup when a subscriber revisits your website.

<script>
    window.addEventListener('load', function(){
        tuemilio.showModal();
    });
</script>

Set the target points

There is a card in the dashboard that shows a progress bar. This progress bar will advance the more points a subscriber has. To set an objective your subscribers need to reach, use the code below. If not set a default maximum of 5 points will be used.

<script>
    window.addEventListener('load', function(){
        tuemilio.modal.objectiveMax = 10;
    });
</script>

Dashboard Customization

Hide elements from the dashboard popup

If you need to hide any card in the dashboard pop, add the following code to your website.

<script>
    window.addEventListener('load', function(){
        tuemilio.modal.hideLeaderboard = true;
        tuemilio.modal.hideReferredsList = true;
        tuemilio.modal.hideDashboardLink = true;
        tuemilio.modal.hideObjective = true;
    });
</script>