How do I create a web page version of an email?

Last updated: July 26, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

In order to create a web page version of your email, it is not necessary to create an additional page to be the 'web page version'. When the 'web page version' option is enabled in your email draft's settings, a new web page is automatically generated using the contents of your email. You will still need to specify basic details for the web page such as a page URL, meta description, and page title.

  • In your HubSpot Marketing account, navigate to Content > Email.
  • Click on the Gear icon > Edit next to the email you want to edit.
  • Go to Settings > Web Version and switch to turn your web version email from Off to On.
  • You will have the option to redirect the web-based email to a landing page at a scheduled date and time. For example, if you have a 24 hour offer, you can choose your homepage as the page to redirect to 24 hours after your email is scheduled to go out.
User-added image
User-added image
  • You will also have the option to update the Page Status of the web version email after it has been sent.
  • The email's web page version URL will function after a valid URL is entered and saved. This means that the web page version will be live in the draft version of your email.
If the Web Version setting is not available under the Settings tab:
  • In the email editor, go to Settings > Edit Template.
User-added image
Make sure the View As Web Page module is present on the Template (typically located at the top of template).
  • Additionally, check that the token is present in Edit Options > Tools > Source Code.
User-added image
User-added image
  • The code will look something like this:

{%if content.create_page%} <div style="padding-top: 15px; font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: right; font-size: 9px; line-height: 1.34em; color: {{secondary_font_color}};">Not rendering correctly? View this email as a web page <a href="{{view_as_page_url}}" target="_blank" data-viewaswebpage="true" style="color: {{secondary_font_color}}; text-decoration: underline; white-space: nowrap">here</a>.</div> {%endif%} 

  • Custom coded templates must contain either the {{view_as_page_section}} or the {{view_as_page_url}} token.

Was this article helpful?