We’ve migrated our documentation to a new site, which means some URLs have changed.
Subscriptions

Auto-populate ESP newsletter opt-in form with a user's email address

To dynamically insert the user's email into your ESP newsletter sign-up or opt-in form, you would need to get the user's email address via JavaScript and use the function tp.pianoId.getUser().email to populate it in your form.

Below, we're going to list all the steps to auto-populate the user's email in the ESP newsletter sign-up form.

  1. You should edit the integration code in Composer and add the ESP integration code ID (the Composer integration code should be placed before the </body> tag on your website) - if not done already.

    window.PianoESPConfig = {
      id: ESP integration code ID (which you can find in the ESP dashboard at Setup > Integrations > Choose necessary integration > Copy 
      code and paste it to Composer integration code)
    }
    
  2. In your Composer experience, check the experience rules, user segments and set a condition for the interaction event that should happen on your site that will trigger the newsletter sign-up form. For example a button click:

  3. After this, you should add a Run JS action card and insert into it the initialization code below:

    try {
        if (window.PianoESP && typeof window.PianoESP.showWidget === 'function') {
            window.PianoESP.showWidget(WIDGET_ID)
        }
    } catch (error) {
        console.error(error);
    }
    

    Where the WIDGET_ID is the newsletter sign-up form ID that can be found in the ESP dashboard. For example:

  4. To pre-fill the email address for logged-in users in the opt-in form, you need to add the following code to the Run JS card after the code from point 3:

    try { 
        var USER_EMAIL = tp.pianoId.getUser() ? tp.pianoId.getUser().email : data.user.email; 
        if (window.PianoESP && typeof window.PianoESP.handleUserEmail === 'function') { 
            window.PianoESP.handleUserEmail(USER_EMAIL); 
        } 
    } catch (error) { 
        console.error(error); 
    }
    

    Please note that the opt-in forms should have the Load anyway, Init on event, Show email in form if our system knows a user settings checked.

  5. Apply and save the changes, and set your experience to Live status.

Last updated: