Popup Filling with Facebook Account Details

Customizing your popup using your visitors’ Facebook account details:

In order to access the Facebook account data of your visitors, you’ll need to generate a Facebook Application ID.

To generate an Application ID please sign in with your Facebook account on the following page: https://developers.facebook.com

Hover the mouse over your profile photo or ’My Apps’ in the top right corner. Choose ’Add a New App’ from the drop-down menu that appears and then choose ‘Website’. Follow the steps to create an Application ID. When you are finished, you will have an App ID and a version number that should be inserted into the code below.

After updating the code below with your App ID and version number, login to your OptiMonk dashboard and visit the Popup editing page for the popup you want to customize with your visitors’ Facebook account details. Click on the “CSS and JavaScript Editor” button. Switch to the JS editor and paste the updated code there. Click on the ‘Preview’ button to confirm the changes, and then click ‘Save’.

Code to be edited:

$(document).ready(function () {
    OptiMonk.executeOnSite(function () {
        // Insert your Facebook App code here
    }, function (){});

    // Creating a new line element to insert our Facebook link into the template
    var br = document.createElement('br');
    // Creating the link that will be used for the Facebook fill
    var connectWithLink = document.createElement('a');
    connectWithLink.href = '#';
    connectWithLink.innerHTML = 'Facebook fill';

    // Select the element where you would like to prepend the new elements
    // The OM-conversion-privacyPolicyDisplay CSS class is for the privacy policy element in the built-in templates that has input fields
    // You probably need to change it
    jQuery(".OM-conversion-privacyPolicyDisplay")
        .prepend(br) // Add the new line element
        .prepend( // Then the connect link element
            jQuery(connectWithLink).on('click', function () {
                OptiMonk.executeOnSite(
                    function (responseHandler) {
                        FB.getLoginStatus(function(response) {
                            if (response.status != 'connected') {
                                FB.login(function (response) {
                                    FB.api('/me', {fields: 'id,name,email'}, function (response) {
                                        responseHandler(response);
                                    });
                                }, { scope: 'email' });
                            } else {
                                FB.api('/me', {fields: 'id,name,email'}, function (response) {
                                    responseHandler(response);
                                });
                            }
                        });
                    },
                    function (response) {
                        // The response contains the id, name and the email properties
                        jQuery("#OM-conversion-formFirstnameInput").val(response.name);
                        jQuery("#OM-conversion-formEmailInput").val(response.email);
                    }
                );
            });
        );
  });