Integrating an email into Hubspot

Laetitia_P · ‎Oct 2, 2017

Hello to all,

The professional designer my company is working with would like to know whether there are specificities to add to a script so that an email created outside of Hubspot would be responsive, sent via Hubspot.

Let me know if my request is unclear, many thanks in advance for your help !

Best regards,

Laetitia

Jsum · ‎Oct 3, 2017

Hi @Laetitia_P,

I'm not entirely sure what you are asking here, Javascript can't be used in email templates but you shouldn't need a script to make your email template responsive so I'd imagine that isn't what you are asking.

If you are wondering about putting a in Hubspot that was built outside of Hubspot, That won't be an issue. Aside from some HubL token requirements you can should be able to just copy and paste it into coded email template file in Hubspot. Huspot does have some default responsive css that might give you some grief but a well built template won't have much issue.

If by responsive your are meaning dynamic, or editable, Then you would need to crawl the template and replace the static content in the tempalte with editable fields. It's pretty much copy and paste.

Does any of this help?

View solution in original post

Jsum · ‎Oct 3, 2017

No problem.

When you create a new coded email template this code is generated in the template. The required tokens are highlighted in blue. I think I got them all but I might include some that aren't actually required.

<!doctype html>
<html>
    <head>
        <title>{% if content.html_title and content.html_title != '' %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}</title>
        {% if content.meta_description %}<meta name="description" content="{{ content.meta_description }}"/>{% endif %}

        <style type="text/css" id="hs-inline-css">
            /*<![CDATA[*/
            /* everything in this style tag will be inlined onto matching elements */
            .sample-rule {

            }
            /*]]>*/
        </style>
    </head>
    <body>
        <!-- Preview text (text which appears right after subject in certain email clients) -->
        <div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}</div>

        <!-- View as webpage link -->
        {% if content.create_page %}
            <div>
                Not rendering correctly? View this email as a web page <a class="hubspot-mergetag" data-viewaswebpage="true" href="{{ view_as_page_url }}">here</a>.
            </div>
        {% endif %}


        <!-- Insert body here -->


        <!-- Office location information and unsubscribe links -->
        <p id="footer">
            {{ site_settings.company_name }}&nbsp;
            {{ site_settings.company_street_address_1 }}&nbsp;
            {{ site_settings.company_street_address_2 }}&nbsp;
            {{ site_settings.company_city }}&nbsp;
            {{ site_settings.company_state }}&nbsp;
            {{ site_settings.company_zip }}&nbsp;
            {{ site_settings.company_country }}&nbsp;
            <br/>
            You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}.
            <br/>
            Update your <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link }}">email preferences</a> to choose the types of emails you receive.
            <br/>
            <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link_all }}">Unsubscribe from all future emails</a>
        </p>
    </body>
</html>

The blue code is required (for the most part) but the markup around them can be edited.