# Optimonk Useful Snippets

## Step 1: Go to JS events: Popup shown

## Step 2: Pass the following code

Depending on specific popup please adjust parameters accordingly

### Hconnect

// Edit these element Ids

var submit_btn = "ele_qugOpA85hsc";
var email_input_id = "ele_NUK-1T32r6"
var gender_select_id = "ele_iYh04kmRVd"; // this is a select html element
var coupon_id = "ele_o5FIW52YG45";

function subToMailjet(email, gender, coupon, doneCallback) {
    var xhr = new XMLHttpRequest();
    var username = "00accc232d8c5c87bc20ab2cabc1b110";
    var password = "cb1d142facd8a2253cc924731c6ca5fc";
    var list_id = "14604";
    var mailjet_endpoint = "https://cors-proxy-web.herokuapp.com/https://api.mailjet.com/v3/REST/contactslist/" + list_id + "/managemanycontacts";
    xhr.open("POST", mailjet_endpoint);
    xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password))
    var payload = {
        "Action": "addforce",
        "Contacts": [
            {
                "Email": email,
                "IsExcludedFromCampaigns": "false",
                "Properties": {
                    "data_source": "Ematic_OPTIMONK",
                    "trigger": event.parameters.event.type,
                    "gender": gender,
                    "coupon": coupon,
                    "signupdate": new Date().toISOString()
                }
            }
        ]
    }

    xhr.onload = function () {
        doneCallback(xhr.response);
    }

    xhr.send(JSON.stringify(payload));
}


document.getElementById(submit_btn).onclick = function () {
    var email = document.getElementById(email_input_id).value;
    var gender_select_element = document.getElementById(gender_select_id)
    var gender = gender_select_element.options[gender_select_element.selectedIndex].text;
    var coupon = document.getElementById(coupon_id).innerText;
    // localStorage.setItem('ematic_email', email); // optional!
    subToMailjet(email, gender, coupon, function (res) { console.log(res); });
}


document.querySelectorAll('.om-popup-close-x')[1].addEventListener("click", function(){
    var email = document.getElementById(email_input_id).value;
    var gender_select_element = document.getElementById(gender_select_id)
    var gender = gender_select_element.options[gender_select_element.selectedIndex].text;
    var coupon = document.getElementById(coupon_id).innerText;
    // localStorage.setItem('ematic_email', email); // optional!
    subToMailjet(email, gender, coupon, function (res) { console.log(res); });
});

### Aristnio

var submit_btn =  "ele_zJknE0kZ-ON";
var email_input_id = "ele_IzE4Ma8fcO";
var phone_id = "ele_7Nh1-cQlJ";
var coupon_id = "ele_3BZZiyUjH";


function subToMailjet(email, phone, coupon, doneCallback) {
    var xhr = new XMLHttpRequest();
    var username = "b30ef25d17c1c7075e556222e554bde5";
    var password = "c9cae67c4315ee8f9c9ac4fad7dc26e8";
    var list_id = "10238633";
    var mailjet_endpoint = "https://cors-proxy-web.herokuapp.com/https://api.mailjet.com/v3/REST/contactslist/" + list_id + "/managemanycontacts";
    xhr.open("POST", mailjet_endpoint);
    xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password))
    var payload = {
        "Action": "addforce",
        "Contacts": [
            {
                "Email": email,
                "IsExcludedFromCampaigns": "false",
                "Properties": {
                    "data_source": "Ematic_OPTIMONK",
                    "trigger": event.parameters.event.type, 
                    "phone_number": phone,
                    "coupon": coupon,
                    "signupdate": new Date().toISOString()
                }
            }
        ]
    }

    xhr.onload = function () {
        doneCallback(xhr.response);
    }

    xhr.send(JSON.stringify(payload));
}


document.getElementById(submit_btn).onclick = function () {
    var email = document.getElementById(email_input_id).value;
    var coupon = document.getElementById(coupon_id).innerText;
    
    // Get Phone number
    var title = document.getElementsByClassName("selected-flag")[1].title;
    var country_code = title.split("+")[title.split("+").length-1];
    var phone = country_code + document.getElementById(phone_id).value;

    // localStorage.setItem('ematic_email', email); // optional!
    subToMailjet(email, phone, coupon, function (res) { console.log(res); });
}


document.querySelectorAll('.om-popup-close-x')[1].addEventListener("click", function(){
    var email = document.getElementById(email_input_id).value;
    var coupon = document.getElementById(coupon_id).innerText;
    
    // Get Phone number
    var title = document.getElementsByClassName("selected-flag")[1].title;
    var country_code = title.split("+")[title.split("+").length-1];
    var phone = country_code + document.getElementById(phone_id).value;

    // localStorage.setItem('ematic_email', email); // optional!
    subToMailjet(email, phone, coupon, function (res) { console.log(res); });
});

# How to subsribe user immediately after popup is filled

## Step 1: Capture Optimonk trigger when popup shows
In Optimonk Code Setup: JS Events = Popup shown

var optimonk_trigger = event.parameters.event.type;
localStorage.setItem('optimonk_trigger', optimonk_trigger);

## Step 2: Subscribe user after popup is fill
In Optimonk Code Setup: JS Events = Popup fill

var submit_btn = "ele_qugOpA85hsc";
var email_input_id = "ele_NUK-1T32r6"
var gender_select_id = "ele_iYh04kmRVd"; // this is a select html element
var coupon_id = "ele_o5FIW52YG45";

function subToMailjet(email, gender, coupon, doneCallback) {
    var xhr = new XMLHttpRequest();
    var username = "00accc232d8c5c87bc20ab2cabc1b110";
    var password = "cb1d142facd8a2253cc924731c6ca5fc";
    var list_id = "14604";
    var mailjet_endpoint = "https://cors-proxy-web.herokuapp.com/https://api.mailjet.com/v3/REST/contactslist/" + list_id + "/managemanycontacts";
    xhr.open("POST", mailjet_endpoint);
    xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password))
    var payload = {
        "Action": "addforce",
        "Contacts": [
            {
                "Email": email,
                "IsExcludedFromCampaigns": "false",
                "Properties": {
                    "data_source": "Ematic_OPTIMONK",
                    "trigger": localStorage.getItem('optimonk_trigger'),
                    "gender": gender,
                    "coupon": coupon,
                    "signupdate": new Date().toISOString()
                }
            }
        ]
    }

    xhr.onload = function () {
        doneCallback(xhr.response);
    }

    xhr.send(JSON.stringify(payload));
}


var email = document.getElementById(email_input_id).value;
var gender_select_element = document.getElementById(gender_select_id)
var gender = gender_select_element.options[gender_select_element.selectedIndex].text;
var coupon = document.getElementById(coupon_id).innerText;
// localStorage.setItem('ematic_email', email); // optional!
subToMailjet(email, gender, coupon, function (res) { 
    console.log(res); 
    localStorage.removeItem('optimonk_trigger');
});