Embed Engagement Cloud pages and forms to your storefront - Magento 2

Learn how to embed Engagement Cloud pages and forms to your Magento 2 storefront to get the data you need on your subscribers.

Overview

You can embed Engagement Cloud forms on your storefront to help capture more data on your subscribers while also using the tracking and automation features that exist in Magento 2.

Before you start

You must be using Magento Enterprise to access Magento PageBuilder. If you’re using Magento Community Edition, there’s an alternative way to embed pages and forms onto your Magento 2 storefront.

To learn more, check out the Using Magento Community edition section in this article.

For Magento Community Edition users, this only works with forms that are created by using Engagement Cloud pages and forms. The form also needs to contain an email address data field.

Embed a form to your storefront

To embed your Engagement Cloud form onto your Magento 2 storefront:

Step 1: Add the dotdigital form block

  1. In Magento 2, go to Content > Blocks > Add New Block.
  2. Select Add Content.
  3. Drag the dotdigital form block onto the canvas.

Step 2: Edit your form settings

  1. Hover over the Edit to select a survey or form row.
  2. Select the Select form icon to edit its settings.
    formsettings.png
  3. In the Select dotdigital Account drop-down menu, select a dotdigital account.
  4. In the Select Form drop-down menu, select the form you want to use.
  5. Select a style and edit the form settings. Your form can either be embedded or appear as a pop-over.

    To learn more, check out selecting a form type.

  6. Select Save.

Select a form type

You can choose to show your form as embedded or as a pop-over on your Magento 2 storefront.

Embedded form
If you choose to embed your form, you can choose if you want to add your respondents to your New Subscribers list in Magento 2. Choose between either Yes or No from the Add respondent to the Newsletter Subscribers list drop-down menu.

To add a respondent to the Newsletter Subscribers list, you must have one contact email address block mapped to the email address data field in your form. This is because the value of the data field is used to create a subscriber in Magento 2. If the Easy Email (Newsletter) capture settings is on, then the email address that’s submitted through the form is used to track an abandoned cart and deanonymises web sessions, for example, Web Behaviour Tracking.

To learn more about Easy Email (Newsletter) capture settings, check out our Abandoned cart: Easy email capture article.

Pop-over form
If you choose to make your form appear as a pop-over, you can edit the following fields:

  • Show after
    The number of seconds it takes before the form is shown to your potential subscribers.
  • Stop displaying
    Choose if your pop-over form should stop displaying when a form is completed or after a number of appearances.
    • Appearances
      If you select After a number of appearances, enter the number of times the pop-over form should stop displaying when it appears the set amount of times to the potential subscriber.
  • Show on mobile devices (not recommended)
    If you want the form to appear on your potential subscribers’ mobile devices,
    select Yes or No from the drop-down menu, .
  • Enable use of ‘Esc’ to dismiss pop-over
    To choose if your potential subscribers can stop showing the pop-over form by selecting the Esc button on their keyboard, select Yes or No from the drop-down menu.
  • Add respondent to the Newsletter Subscribers list
    Select if you want to add your respondents to your New Subscribers list when the form is completed.

Add respondent to the Newsletter Subscribers list requires that you must have one contact email address block mapped to the email address data field in your form because the value of this field is used to create a subscriber in Magento 2. If the Easy Email (Newsletter) capture settings is on, then the email address that’s submitted through the form is used to track an abandoned cart and deanonymises web sessions, for example, Web Behaviour Tracking.

To learn more, check out the articles Abandoned cart: Easy email capture and Assigning data fields to your form block.

Using Magento Community Edition

If you don’t have Magento Enterprise, it’s possible to manually embed a new form with Magento Community Edition. This way makes sure that the subscriber is created in Magento 2 and the tracking continues to work.

To embed the form to your Magento 2 storefront:

  1. In the app menu, go to STORES > Settings > Configuration > GENERAL > Content Management.
  2. Select Disable Completely from the Enable WYSIWYG Editor drop-down menu.
  3. In the app menu, go to CONTENT > Elements > Pages and locate the page you want to embed your form to.
  4. Under the Action column, select Select > Edit.
  5. Select Content and paste the following code into the box:
    <script src="//r1.dotdigital-pages.com/resources/sharing/embed.js" data-sharing="lp-embed"
        data-page-domain="r1.dotdigital-pages.com" data-page-id="XXXX-XXX/INSERT
        FORM ID HERE"></script>
    <script> ecPF.onComplete(function (formData) { if (formData.contactEmail != null && formData.contactEmail.length > 0) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState === XMLHttpRequest.DONE && this.status ===
    200) { window.scrollTo(0,0); window.location.reload(); } } xhr.open("POST", 'https://MAGENTO-HOSTNAME/newsletter/subscriber/new',
    true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencode
    d; charset=UTF-8"); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.send("email=" + formData.contactEmail); } }, "XXXX-XXX"); </script>
  6. Replace the following parts in the code:
    • <script src…>
      The embed code of the form to insert. This is found in Engagement Cloud by going to Pages and forms > Edit > Publish > Get embed code or get pop-over code.
    • <XXXX-XXX>
      The first forms part of your form ID. To find your form ID in Engagement Cloud:
      • If your page or form isn’t published, go to Pages and forms > Edit > Publish > Create a link. Next to the Preview field, your form ID comes after /p/.
      • If your page or form is published, go to Pages and forms > Edit > Published page, and then select the URL under the 1. Address heading. Next to the Preview field, your form ID comes after /p/.
        magento2formcodes.png
      • <MAGENTO-HOSTNAME>
        Your website host name, for example, mydomain.com.
  7. Select Save.

That’s it. The form now appears on your website. For all new form submissions, the form adds the customer email address to your Magento 2 Newsletter Subscribers table. If the EasyEmail capture option is enabled for newsletters, any existing cart in the session is also updated with the email address and the abandoned cart process begins.

See also

Did you find this article helpful?

Can we help?

Thanks for using Engagement Cloud. If you need more help or support, then contact our support team.