Back to blue

Email Marketing

Email Marketing helps companies build deeper, longer-lasting relationships with their customers. We use Email Marketing to store and manage our e-mail subscriptions.

Get expert advice delivered right to your inbox

Moving means you’ve got a lot on your mind. Don’t risk forgetting important details. We’ve created a comprehensive list of everything you need.

    Thank you, you have successfully subscribed to our newsletter! Enjoy reading our tips and recommendations.

    Unsubscribe easily whenever you want

    Any number of subscription boxes can be added to a site, in order to have multiple ways to obtain users. You have to make sure to have unique form names for each.

    Get expert advice delivered right to your inbox

    Moving means you’ve got a lot on your mind. Don’t risk forgetting important details. We’ve created a comprehensive list of everything you need.

      Thank you, you have successfully subscribed to our newsletter! Enjoy reading our tips and recommendations.

      Unsubscribe easily whenever you want

      Dependency

      Email Marketing requires ca_styleguide_forms_light.js or ca_styleguide_forms.js in order to make the live validations so make sure it's present on your page

      Variations

      Small

      There is a small variant with less spacing, to use it you can leverage the modifier nw-subs__box--sm.

      Get expert advice delivered right to your inbox

        Thank you, you have successfully subscribed to our newsletter! Enjoy reading our tips and recommendations.

        How to use

        1. Make sure to include the JS via Lazy Load and CSS into your page or project:

        <link rel="stylesheet" type="text/css" media="all" href="{{ static('css/ca_sg_email_mkt.css') }}" /> <script type="text/javascript" class="lazy-load" data-src="{{ static("js/ca_styleguide_email_mkt.js") }}"></script>

        2. Inside a wrapper <div class="nw-subs__box">, add a <form> , the success / error messages and make sure to include a submit button with the email-marketing-sbmt class:

        <div class="nw-subs__box"> <form class="nw-subs__frm" name="UNIQUE_NAME"> <div class="nw-subs__inf"> <p class="nw-subs__tlng">Get expert advice delivered right to your inbox</p> <p class="nw-subs__sbtl">Moving means you’ve got a lot on your mind. Don’t risk forgetting important details. We’ve created a comprehensive list of everything you need.</p> </div> <div class="nw-subs__input"> <div class="ca-form__group ca-form__group--black js-form-group js-floating-label-input"> <label for="email-2" class="ca-form__label js-label">Email</label> <div class="ca-form__input-icon-wrapper"> <input class="ca-form__input" type="text" required name="email" id="email-2" type="email" pattern="[\w\.%+-]+@[\w.-]+\.[a-zA-Z]{2,4}$" placeholder="Email" /> <button class="ca-btn--link ca-form__input-icon ca-form__input-icon--clickable email-marketing-sbmt"> {% include "frontend/icons/rebrand/arrow-right.html" %} </button> </div> <ul class="ca-form__error js-errorlist"></ul> </div> <input type="hidden" name="source" value="Styleguide EmailMarketing"> <input type="hidden" data-email-marketing="vars" name="category" value="styleguide Category"> <input type="hidden" data-email-marketing="vars" name="brand" value="styleguide Brand"> <input type="hidden" data-email-marketing="lists" name="Custom List Name_" value="a value"> <input type="hidden" data-email-marketing="lists" name="Another List Name_" value="a value"> </form> </div> <div class="nw-subs__thnk js-is-hidden"> {% include "frontend/icons/rebrand/email.html" %} <p class="nw-subs__tl">Thank you, you have successfully subscribed to our newsletter! Enjoy reading our tips and recommendations.</p> </div> </div> <span class="nw-subs__dclmr">Unsubscribe easily whenever you want</span>

        Custom fields and additional variables

        Additional variables or fields are passed through hidden inputs.

        The source property is passed through a field with the name source.

        The vars and lists properties are passed through fields with data-email-marketing attribute, being data-email-marketing="lists" added to the lists object and data-email-marketing="vars" added to the vars object.

        The lists object takes it's property names from the name attribute of the field and always have a 1 as a value since we only signup users to our newsletters, we don't unsubscribe.

        For the vars object, the property name will be taken from the name attribute as well and the value from the value attribute. Example: <input type="hidden" name="source" value="Styleguide ThirdParty" /> <input type="hidden" data-email-marketing="vars" name="company" value="styleguide" /> <input type="hidden" data-email-marketing="vars" name="category" value="styleguide" /> <input type="hidden" data-email-marketing="lists" name="Some List Name" value="doesn't matter it'll be 1" />

        As default, the script will add the email to the __CA Master List (all users) list. We can customize the lists the user is subscribing to by using listName.


        Custom initialization

        If you're adding a new subscription box dynamically (with an ajax call for example) after the page loads, you would need to start the script again in order to add the eventListener to the submit button.

        For doing that, you can call the init method (there is an instance in the window):

        window.CAEmailMarketing.init();

        You can also send a DOM element as a parameter, in order to initiate any subscription box inside that element. (The code is going to look for a submit button inside a form, so don't send the form itself, send the parent element instead):

        window.CAEmailMarketing.init(yourDOMelement);

        UserDB Tracking

        You can set the optional type of UserDB email signup event via the data-uapi-email-type="weekly_newsletter" attribute on the form submit button. If this attribute is not added to the submit button, the type data won't be send in the payload. See an example on the first form of this page.

        The payload that wil be sent:

        payload = { category: 'page interaction', name: 'email signup', data: { success: [true, false], type: ['weekly_newsletter', 'daily_newsletter', 'radio'], }, };