Use default modules in the layout editor

HubSpot provides default modules for building drag and drop templates in the layout editor within the design manager. You can add default modules and clone default modules for use on your drag and drop templates. Additionally, you can edit the default content for some default modules. 

Before you get started

Before you begin working with this feature, make sure to fully understand what steps should be taken ahead of time, as well as the limitations of the feature and potential consequences of using it. 

Understand requirements

• Users must be a Super Admin or have the Design tools permissions toggled on to access and edit modules. 

Understand limitations & considerations

• This article explains how to use the inspector in the layout editor within the design manager to add and clone default modules. You can also edit default content.for some default modules.
• To add default modules, using HubL, to HTML templates or custom templates, learn more in the developer documentation.
• To add and edit modules in the content editor, learn more about adding and editing modules in the content editor.
• Marketing Hub and Content Hub Professional & Enterprise accounts have a @hubspot folder in the design manager by default.
• Some default modules can only be added to specific template types. For example, the form module is not available for email templates.
• Default modules must be cloned before the module source code can be customized.

Add modules to drag and drop templates

You can add default modules to drag and drop templates, using the layout editor, in the design manager.

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the left column, click the name of the template. 
3. In the right column, click + Add. 
4. Enter the name of a default or custom module in the search bar. 
5. Click the module name, then drag it into your template. 
6. In the inspector for the Styling options section, set custom styling for the module. 

7. In the inspector for the Default content section, edit the content that will appear when the module is added to the content editor. Learn more about editing the default content for modules.

8. To prevent other users from editing a module's default content, click to toggle the Prevent editing in content editors switch on in the Editor options section.

Clone default modules

You can clone default modules in the @hubspot folder in the design manager to edit the module's source code. This folder has all your themes and default modules, including drag and drop email modules. 

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the finder, click the @hubspot folder.

3. Right click a default module, then select Clone module. 
4. In the cloned module, edit the module source code. Learn more about configuring a module.
5. In the upper right, click Publish changes.

Manage module versions

Periodically, HubSpot may release a new version of an existing default module. This allows HubSpot to implement significant updates without disrupting existing content. For example, a new version of a module might provide improved field organization, more styling options, and improved functionality. Learn more about module versioning in HubSpot's developer documentation.

You can manage module versions from your account's Themes & Modules settings page, including updating a version, reverting to a previous version, or viewing the current versions of all default modules.

Update a module's version

• To update to a new version of a module:

1. 1. In your HubSpot account, click the settings settings icon in the top navigation bar.
   2. In the left sidebar menu, navigate to Content > Themes & Modules.
   3. On the Alerts tab, the latest updates for default modules will appear with an Update Available tag. Click View update next to a module to view more details about the update.

1. 4. In the right sidebar, review the changes. The sidebar will have a high-level summary of the update, along with a detailed breakdown of the changes and the assets that will be affected.

1. 5. To update the module, click Install update. Then, in the dialog box, click Confirm update.

Please note: it can take up to 10 minutes for pages and templates to show the updated module.

• After updating the module, you'll be taken to the Modules tab of the Themes & Modules settings page. On this page, you can see recently updated modules, modules with available updates, and version information for all your account's default modules.

Revert a updated module

On the Modules tab of the settings page, you can revert a module that's been updated in the past 30 days to a previous version. 

• To revert a recently updated module:
  1. In your HubSpot account, click the settings settings icon in the top navigation bar.
  2. In the left sidebar menu, navigate to Content > Themes & Modules.
  3. Click the Modules tab, locate the module that you want to revert, then click Roll back recent update.

• 4. In the right sidebar, review the module's version history, then click Roll back this update.

• 5. Review the information in the right sidebar to confirm that you'd like to roll back the update, then click Roll back. 
  6. In the dialog box, click Confirm. 
• After reverting the module, it may take some time for your templates and pages to show the reverted module. You can update the module again by updating a module's version.

Edit default content for different types of modules

You can edit the default content for some default modules in drag and drop templates within the Design Manager's layout editor. To see a complete list of default modules, learn more about default email modules and default web modules.

Backup unsubscribe

The backup unsubscribe module is shown to email recipients who click a link to unsubscribe and HubSpot can't confirm their email address. This module can only be edited from an email backup unsubscribe system template. 

• To edit the backup unsubscribe module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Backup Unsubscribe module.
  4. In the inspector for the Default content section, enter the text that appears for Heading, Subheading, and Error message.

• When you've finished editing the module, click Publish changes.

Blog email subscription

The blog email subscription module lets visitors subscribe to your blog digest emails by filling out a form. This module is populated by your blog subscriber form, which can be customized in your forms tool.

Please note: the blog email subscription module is not available for email templates. 

• To edit the blog email subscription module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Blog Email Subscription module or add the module.
  4. In the inspector for the Default content section, click the Select blog to display dropdown menu and select the blog your visitors are subscribing to.
  5. Click the Heading level dropdown menu to select a heading level.
  6. In the Title to display above form field, enter the text that will appear in the title above the form.
  7. In the Inline response for users field, click the expandIcon expand icon to customize the text that appears after a visitor submits the form.

• When you have finished editing the blog email subscription module, click Publish changes in the top right.

Call-to-action

A call-to-action (CTA) module places a CTA in its own module within your layout. You can also insert a CTA in a rich text module.

• To edit a call-to-action module's default content:

• 1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Call-to-Action module or add the module.
  4. In the inspector for the Default content section, click Select.

• 5. In the right side pane, select a CTA or click Create new.
  6. Click Insert.

Content library

You can use the content library module to set up a library of resources for your visitors to access.

• To edit the content library module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Content library module or add the module.
  4. To edit an existing resource in the content library, click the editIc onedit icon in the inspector. You can customize the name, description, link text, and image.
  5. To delete a resource from the content library module, click the deleteIcon delete icon in the inspector.
  6. To add a custom resource to the content library module, click + Add in the inspector.
  7. To set a resource as featured, click the favoriteIcon set as featured icon in the inspector.

• When you have finished editing the content library module, click Publish changes in the top right.

Form

You can use the form module to add a form to your content to capture visitor information.

Please note: the form module is not available for email templates. 

• To edit the form module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Form module or add the module.
  4. In the inspector for the Default content section, enter the text for the Form Title field.
  5. In the Form dropdown menu, select a form.
  6. In the What will a visitor see after submitting your form? field, select Redirect to another page or Display an inline thank you message. 
     • To redirect to another page, in the Redirect link dropdown menu, select a page, post or click + Add external link. 
     • To display an inline thank you message, in the Thank you message field, click the expandexpand icon.
  7. Select the Send form notifications to specified email addresses instead of the form defaults checkbox to override any notification recipients set in the forms tool.
• When you've finished editing the form module, click Publish changes in the top right.

Header

You can use the header module to display a line of text in a heading HTML tag.

• To edit the header module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Heading module or add the module.
  4. In the inspector for the Default content section, enter text in the Heading content field. 
  5. Click the Heading level dropdown menu and select a heading level (H1-H4).

• When you've finished editing the header module, click Publish changes in the top right.

Image

You can use the image module to display a single image in your content.

• To edit the image module's default content:
  
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Image module or add the module.
  4. In the inspector for the Default content section, click Replace in the Image field.
  5. In the right side pane, select the image you want to display. 
  6. In the Alt text field, enter a text description of the image.
  7. In the Size dropdown menu, select Automatically adjust or Exact width and height.
  8. In the Maximum size dropdown menu, select Image's original size or Custom.
  9. In the Image loading dropdown menu, select Browser default, Lazy, or Eager.
  10. In the Link (optional) field, enter an optional URL to direct visitors to when the image is clicked.

• When you've finished editing the image module, click Publish changes in the top right.

Image Grid

You can use the image grid module to add a uniform grid of images to your content. 

• To edit the image grid module's default content:
  
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Image Grid module or add the module.
  4. To edit an existing image in the image grid module, click the editIc onedit icon in the inspector. You can upload or browse existing images, and edit link text, link URL, or the hover message.
  5. To delete an image in the image grid module, click the deleteIcon delete icon in the inspector.
  6. To add a new image to the image grid module, click + Add in the inspector.
  7. Click to expand the Settings. In the settings pane, you can adjust the Hover functionality, Click functionality, Columns, and Aspect ratio. 

• When you've finished editing the image grid module, click Publish changes in the top right.

Image Slider

You can use the image slider module to display multiple images that cycle through automatically in the same module. 

• To edit the image slider module's default content:
  
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Image Slider module or add the module.
  4. To edit an existing image in the image slider module, click the editIc onedit icon in the inspector. You can upload or browse existing images, and edit the caption or link URL.
  5. To delete an image from the image slider module, click the deleteIcon delete icon in the inspector.
  6. To add a new image to the image slider module, click + Add in the inspector.
  7. Click to expand the Settings. In the settings pane, you can adjust the Slides, Movement, and Navigation. 

• When you've finished editing the image slider module, click Publish changes in the top right.

Language switcher

You can use the language switcher module to provide a way for visitors to switch between translated versions of a page or blog. 

Please note: the language switcher module is not available for email templates. 

• To edit the language switcher module's default content:
  
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Language Switcher module or add the module.
  4. In the inspector for the Default content section, select the Add chevron down checkbox to display a chevron for the language switcher.
  5. Click the Display mode dropdown menu to select one of the following:
     
     • Pagelang: the name of each language that will appear in the language of the current page. For example, if you're viewing the English version of a page with a French translation, when you click the language switcher, you'll see English and French as the language names. 
     • Localized: the name of each language will appear in that language. For example, if you're viewing the English version of a page with a French translation, when you click the language switcher, you'll see English and Français as the language names.
     • Hybrid: a combination of the two. For example, if you're viewing the English version of a page with a French translation, when you click the language switcher, you'll see English and French (Français) as the language names.
  6. Click the Icon options dropdown menu and select None, Icon, or Custom icon.

• When you've finished editing the language switcher module, click Publish changes in the top right.

Please note: this module will only appear on live pages with more than one published translation. Learn more about working with multi-language content in HubSpot.

Logo

You can use the logo module to display your company logo from your brand kit on your content. 

• To edit the logo module's default content :
  
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Logo module or add the module.
  4. In the inspector for the Default content section, click to toggle Override default logo switch on to upload a new image for content using the template.
  5. To edit the default logo, click Edit default logo in this domain.
  6. In the Image loading dropdown menu, select Browser default, Lazy, or Eager. 
  7. In the Link URL field, enter the URL text you want visitors to be directed to when the logo image is clicked. This will override the default specified in your brand kit.

• When you've finished editing the logo module, click Publish changes in the top right.

Logo grid

You can use the logo grid module to arrange multiple logos of different dimensions in a consistent grid.

• To edit the logo grid module's default content:
  
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Logo Grid module or add the module.
  4. To edit an existing image, click the editIconedit icon in the inspector. You can upload or browse existing images, and edit the alt text or image loading..
  5. To delete an image in the logo grid module, click the deleteIcon delete icon in the inspector.
  6. To add a new image to the logo grid module, click + Add in the inspector.

• When you've finished editing the logo grid module, click Publish changes in the top right.

Main email body

The main email body module is a standard rich text module that is included by default in every email template. 

• To edit the main email body module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Main Email Body module.
  4. In the inspector for the Default content section, click the expandIconexpand icon to edit the text that appears in the email body.

• To edit the main email body module's styling options: 
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Main Email Body module.
  4. In the inspector for the Styling options section, enter hexadecimal values in the text fields for Text color, Background color, and Border color. You can also click the color picker.

• When you've finished editing the main email body module, click Publish changes in the top right.

Menu

You can use the menu module to add navigation to your content. Menus are created and managed directly in your navigation menu settings. 

• To edit the menu module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Menu module or add the module.
  4. In the inspector for the Default content section, click the Menu dropdown menu and select an existing menu or click Create new.
  5. In the Advanced menu type dropdown menu, select one of the following:
     • Static - Always show top-level pages in menu: keep your menu consistent across all pages.
     • Dynamic by section - Show pages in menu that are related to section being viewed: display menu items relative to the top level menu item being viewed.
     • Dynamic by page - Show pages in menu that are related to page being viewed: display menu items related to the specific page being viewed.
     • Breadcrumb style path menu (uses horizontal flow): display menu items horizontally in a relative path across the top of your site.
  6. In the Max levels field, enter the maximum number of child menu items that can display.
  7. In the Orientation dropdown menu, select Horizontal or Vertical.
  8. To show child menu items when you hover over the parent navigation, select the Enable flyouts? checkbox.

• When you've finished editing the menu module, click Publish changes in the top right.

Office location information

The office location module includes required tokens that must be included in an email template to send marketing emails. 

• To edit the office location information module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your email template.
  3. In the layout editor, click the Office Location Information module.
  4. In the inspector for the Default content section, click the expandIcon expand icon to edit the text that appears with the required tokens in your email.

• To edit the office location information module's styling options:
  • In your HubSpot account, navigate to Content > Design Manager.
  • Navigate to your template.
  • In the layout editor, click the Office Location Information module.
  • In the inspector for the Styling options section, enter hexadecimal values in the text fields for Text color, Background color, and Border color. You can also click the color picker.

• When you've finished editing the office location information module, click Publish changes in the top right.

One line of text

You can use the one line of text module to add a single line of text to your content. 

Password prompt

The password prompt module is available on password prompt system templates. If a page is password protected, the password prompt page will display before a user can access the page. 

• To edit the password prompt module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your password prompt template.
  3. In the layout editor, click the Password Prompt module.
  4. In the inspector for the Default content section, click the expandIcon expand icon to edit the bad password message text.

• When you've finished editing the password prompt module, click Publish changes in the top right.

Post filter

You can use the post filter module to display a list of blog articles from a specific topic, month, or author. 

• To edit the post filter module's default content:

1. 1. In your HubSpot account, navigate to Content > Design Manager.
   2. Navigate to your template.
   3. In the layout editor, click the Post Filter module.
   4. In the inspector for the Default content section, select a blog to display in the Select blog to display dropdown menu.
   5. In the List of values for filter links dropdown menu, select Tag, Month, or Author.
   6. In the Ordering of values for filter links dropdown menu, select Post Count or Name.
   7. In the List title to display field, enter text that will display as the list title.
   8. To show all filters, select the Show all filters checkbox.
   9. In the Maximum number of filter values to display field, enter the number of posts for a filter.
   10. In the Text to display if more than the maximum value to display are available. Leave blank to omit link field, enter the text that will appear if there are more available posts in a category.

• When you've finished editing the post filter module, click Publish changes in the top right.

Post listing

You can use the post listing module to display a list of blog posts from your blog. 

• To edit the post listing module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Post Listing module.
  4. In the inspector for the Default content section, select a blog to display in the Select blog to display dropdown menu.
  5. In the Sort posts by dropdown menu, select Most recent, Most popular - all time, Most popular - past year, Most popular - past six months, or Most popular - past month.
  6. In the Choose what shows in your feed field, select the checkbox next to Image, Title, Author name, and/or Publish date.
  7. In the Maximum blog posts to list field, enter the maximum number of blog posts to display.
  8. In the Post heading field, enter the text displayed at the top of the module.
  9. In the Heading level dropdown menu, select the heading level (H1-H6) for the content in the module.

• When you've finished editing the post listing module, click Publish changes in the top right.

Product

You can display products from your product library on pages and posts using the product module. The product's default information is displayed, but you can choose to override it on each page. 

• To edit the product module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Product module or add the module.
  4. In the inspector for the Default content section, click Select a product.
  5. In the right side pane, select the checkbox next to the product, then click Select. To create a new product, click Create a product. 
  6. Once a product is selected, you can override and edit the Name, Description, Image, and Button displayed.

• When you've finished editing the product module, click Publish changes in the top right.

Rich text

The rich text module supports editing options for different components, such as text, images, and CTAs.

• To edit the rich text module's default content:
  
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Rich Text module or add the module.
  4. In the inspector for the Default content section, click the expandIcon expand icon to edit the Rich text content. Learn more about editing content in rich text modules.

• When you've finished editing the rich text module, click Publish changes in the top right.

RSS listing

You can use an RSS listing module to display blog post summaries for a HubSpot blog or external RSS feed.

Please note: the RSS listing module is not available for email templates. Use an RSS email instead. 

• To edit the RSS listing module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the RSS Listing module or add the module.
  4. In the inspector for the Default content section, enter text for the RSS Title field.
  5. In the Add an RSS feed field, select Use an external RSS feed or Use a HubSpot-hosted blog.
  6. In the Blog dropdown menu, select a blog.
  7. In the Filter by tag dropdown menu, select a tag.
  8. In the Maximum number of posts to display field, enter the number of posts.
  1. To include a featured image, select the checkbox for Include featured image.
  2. To show the author's name, select the checkbox for Show author name.
  3. In the Author attribution text field, enter the text to be displayed. The default includes by as the attribution text.
• 
  
  4. To show a blog summary, select the checkbox for Show summary.
  5. In the Limit summary length (number of characters) field, enter the number of characters to limit the summary to.
  6. In the Summary clickthrough text field, enter the text to be displayed. The default includes Read more as the text.
  7. To show the publish date, select the checkbox for Show publish date.
  8. In the Publish date format dropdown menu, select the format of the publish date.
  9. In the Publish date indicator text field, enter the indicator text to be displayed. The default includes posted at as the text.

• When you've finished editing the RSS listing module, click Publish changes in the top right.

Section heading

You can use the section heading module to display text in a heading tag with a paragraph subtitle. 

• To edit the section heading module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Section Heading module or add the module.
  4. In the inspector for the Default content section, enter text for the Section heading content field. 
  5. In the Heading level dropdown menu, select the heading level (H1-H6) of the text content.

• When you've finished editing the section heading module, click Publish changes in the top right.

Simple menu

You can use the simple menu module to build a menu for a specific template.

• To edit the simple menu module's default content:

1. 1. In your HubSpot account, navigate to Content > Design Manager.
   2. Navigate to your template.
   3. In the layout editor, click the Simple Menu module or add the module.
   4. In the inspector for the Default content section, click Edit menu for the Simple menu field. 

1. 5. To edit the simple menu, click Add menu item. Then enter text for the Menu item label field. The default menu item type is set to Page Link.
      • To change the menu item type to an external URL link, click the Actions dropdown menu and then click URL Link.
      • To change the menu item type to not have a URL link, click the Actions dropdown menu and then click No Link.
      • To change the menu item type to a HubSpot-hosted page with a URL parameter, click the Actions dropdown menu and then click Page link with URL parameter.

1. 6. In the Menu orientation field, select Horizontal or Vertical. When you change the menu orientation settings, a class of hs-menu-flow-horizontal or hs-menu-flow-vertical is added to the menu wrapper container. This class can be used to style the menu in your CSS. Learn more about classes added by module settings in the developer documentation.

• When you've finished editing the simple menu module, click Publish changes in the top right.

Social sharing

You can use the social sharing module to provide visitors with an option to share your content across social media channels and email.

• To edit the social sharing module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the Social Sharing module or add the module.
  4. In the inspector for the Default content section, enter an optional custom page URL in the Link URL field.
  5. In each social network section, click to expand the section and then select the Enabled? checkbox to include it for your content.
  6. Once a social network has been enabled, the Link field will automatically populate with the required HubL tags to share your content. In marketing emails, the module will use the web version URL of that email in the share link.
     

Please note: the social sharing module uses default icons for each social network. If you'd like to use your own custom social icons, you can create a customized version of the module.

• When you've finished editing the social sharing module, click Publish changes in the top right.

Social follow

You can use the social follow module to provide visitors with an option to follow your company on social media.

• To edit the social follow module's default content:

1. 1. In your HubSpot account, navigate to Content > Design Manager.
   2. Navigate to your template.
   3. In the layout editor, click the Social follow module or add the module.

• 4. To edit an existing social link from the social follow module, click the editIconedit icon in the inspector. You can customize the URL, and select Open link in new window, This link is a podcast, Customize alt text, and/or Customize iconcheckboxes.

1. 5. To delete a social link from the social follow module, click the deleteIcon delete icon in the inspector.
   6. To add a social link to the social follow module, click + Add in the inspector. In the Link to dropdown menu, select External or Email address.

• When you've finished editing the social follow module, click Publish changes in the top right.

Subscription preferences

You can use the subscription preference module to customize the content an email recipient sees when they manage their subscription preferences. This module is only available on subscription preferences system templates.

• To edit the subscription preferences module's default content:

1. 1. In your HubSpot account, navigate to Content > Design Manager.
   2. Navigate to your template.
   3. In the layout editor, click the Subscription Preferences module.
   4. In the inspector for the Default content section, enter text for the Header field.
   5. In the Header heading level dropdown menu, select a heading level (H1-H6).
   6. In the Email heading level dropdown menu, select a heading level (H1-H6).
   7. In the Subheader field, click the expandIcon expand icon to edit the text.

1. 8. Enter your desired text, in the following fields:
      • Preference selection help text
      • Unsubscribe all help text
      • Unsubscribe all help text for a. currently unsubbed user
      • Unsubscribe all label
      • Update preferences button text
      • Resubscribe button text

• When you've finished editing the subscription preferences module, click Publish changes in the top right.

Subscription update confirmation

You can use the subscription update confirmation module to customize what content displays when an email recipient updates their subscription preferences. This module is only available on email subscription confirmation system templates.

• To edit the subscription update confirmation module's default content:

1. 1. In your HubSpot account, navigate to Content > Design Manager.
   2. Navigate to your system template.
   3. In the layout editor, click the Subscriptions Update Confirmation module.
   4. In the inspector for the Default content section, enter text for the Header field.
   5. In the Header heading level dropdown menu, select a heading level (H1-H6).
   6. In the Email heading level dropdown menu, select a heading level (H1-H6).
   7. In the Subheader field, click the expandIcon expand icon to edit the text.

1. 8. In the Message on unsubscribe field, enter the text to be displayed when a visitor unsubscribes.
   9. In the Message on subscription update field, enter the text to be displayed when a visitor updates their subscription preferences.

• When you've finished editing the subscriptions update confirmation module, click Publish changes in the top right.

View as web page

You can use the view as web page module to provide email recipients with the option to open your marketing emails as a web page. Learn more about using the web page version of an email module.

• To edit the view as web page module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your email template.
  3. In the layout editor, click the View As Web Page module or add the module.
  4. In the inspector for the Default content section, click the expandIco expand icon to edit the text that appears in the View as web page text field.

• To edit the main email body module's styling options: 
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your email template.
  3. In the layout editor, click the View As Web Page module or add the module.
  4. In the inspector for the Styling options section, enter hexadecimal values in the text fields for Text color, Background color, and Border color. You can also click the color picker.

• When you've finished editing the main email body module, click Publish changes in the top right.

WhatsApp Link 

You can use the WhatsApp link module to give website visitors and option to connect with you directly. This module can be added to pages, blog posts, and blog listing pages. To use this module, you'll need to connect your WhatsApp channel to your conversations inbox.

Please note: this module is only available for Marketing Hub and Service Hub Professional and Enterprise accounts.

• To edit the WhatsApp link module's default content:
  1. In your HubSpot account, navigate to Content > Design Manager.
  2. Navigate to your template.
  3. In the layout editor, click the WhatsApp Link module or 
     or add the module.
  4. In the inspector for the Default content section, click Go to Settings to connect your WhatsApp channel to your conversations inbox. 
  5. In the Opt in text dropdown menu, select an Opt in option.
  6. In the Show dropdown menu, select Text and icon, Text only, or Icon only. 
  7. In the Icon position dropdown menu, select Left or Right.
  8. In the Button text field, enter the text that will display on the button. The default text will display Chat on WhatsApp.
  9. In the Whatsapp icon title field, enter the title text for accessibility. The default text is WhatsApp Icon.

• When you've finished editing the WhatsApp link module, click Publish changes in the top right.