Using Foundation Emails as a base for Hubspot Email Template

[edward_frontier]

Hi has anyone had any luck with using Foundation Emails (http://foundation.zurb.com/emails.html) as a base for templates?

I have added all the foundation css to the <style type="text/css" data-hse-inline-css="true"> in the head of the file but Hubspot keeps on adding extra markup even upon using the Make Basic option.

If anyone can help, it would be much appreciated!

Thanks

[matttunney]

Yes, I've used this a few times for coded emails.

You have to make sure that you embed the required subscription items

{{{{raw}}}}<small>
    <center>
      {{hubspot-footer.site_settings.company_name}},
      {{hubspot-footer.site_settings.company_street_address_1}},
      {{hubspot-footer.site_settings.company_street_address_2}},
      {{hubspot-footer.site_settings.company_city}},
      {{hubspot-footer.site_settings.company_state}},
      {{hubspot-footer.site_settings.company_zip}},
      {{hubspot-footer.site_settings.company_country}}
      <br /> You received this email because you are subscribed to
      {{hubspot-footer.subscription_name }} from {{hubspot-footer.site_settings.company_name}}.
      <br />
      Update your <a target="_blank" href="{{hubspot-footer.unsubscribe_link}}" data-unsubscribe="true">email preferences</a> to choose the types of emails you receive.<br /> <a target="_blank" href="{{hubspot-footer.unsubscribe_link_all}}"  data-unsubscribe="true">Unsubscribe from all future emails</a>.
    </center>
</small>{{{{/raw}}}}

This uses a `raw` helper to ensure foundation does not try to compile the hubspot email variables.

/**
 * Any code used inside this helper is ignored by Handlebars. Use it if your email service provider uses a Handlebars-like syntax.
 * @example
 * {{{{raw}}}}
 * {{ this }} code won't be parsed.
 * {{{{/raw}}}}
 */
module.exports = function(content) {
  return content.fn();
}

Save this as a `raw.js` in your helpers folder.

[maxlee]

Yes, I've gotten it to work for the most part with the latest version of Foundation. I needed to modify a few parts and make sure everything was inlined. I am in the process of writing up a brief article explaining what I did. Will post a link here when its up. 

[CubicflowDan]

Hey maxlee, I'm currently trying to do the same thing as you. Any chance that article you mentioned is posted anywhere?

[John]

Are you using the drag and drop email template editor? Or a coded file?

[edward_frontier]

I've tried both methods but no luck. What is affecting it is the default Hubspot code that wraps the template causes issues within the template. I guess Hubspot really want people to use their system, I had to end up using the Hubspot Drag and Drop way and modifying the code there.

[WEDIA]

I've tried using the Foundation Emails some months ago. It's not working on Hubspot and you may need to do extra work in order to make it work on mobile especially if you have inline images etc.

I tried custom widgets, exported code templates nothing worked.

I ended up using the Hubspot way for emails which works more than ok. I suggest you do the same 🙂