How to Embed Marq Content in HubSpot Emails
Take your email marketing to the next level by embedding Marq projects directly into your HubSpot emails. Instead of sending email attachments, you can display your beautifully designed Marq content inline, complete with working links and calls-to-action that recipients can interact with immediately.
Why Embed Instead of Attach?
Embedding Marq content in emails provides several advantages over traditional attachments:
Benefits of Embedded Content
- Immediate Visibility: Recipients see your design right in the emailno download required
- Working Links: CTAs and links are clickable directly from the email
- Better Engagement: Interactive content drives higher click-through rates
- Professional Appearance: Rich, branded designs stand out in crowded inboxes
- Mobile-Friendly: Embedded content adapts to different screen sizes
- Tracking: Monitor clicks and interactions with your embedded content
Step-by-Step: Embedding Marq in HubSpot Emails
Follow these simple steps to embed your Marq project in a HubSpot email:
Add Custom Links to Your Marq Project
Before embedding, ensure your project has working links:
- Open your project in the Marq editor
- Select any element you want to be clickable (button, text, image)
- Add a custom link (URL) to that element
- Common link destinations:
- Website landing pages
- Product pages
- Registration forms
- Contact pages
- Social media profiles
- Test that your links work by clicking them in preview mode
Pro Tip: Add clear, compelling CTAs (like "Register Now," "Learn More," "Shop Now") and link them prominently. Recipients should know exactly what action to take.
Generate Embed Code
Once your project is ready with links configured:
- Click the Share button in the upper right of the Marq editor
- Select Publish on the Web
- Choose Embed in an Email from the options
- If this is your first time publishing, click Publish to make the project publicly accessible
Configure Embed Settings
Set your embed preferences:
- Size: Adjust the width and height of the embedded content
- Typical email width: 600px
- Consider mobile viewing when setting size
- Height should accommodate your content without excessive scrolling
- Preview: See how your embed will appear in emails
- Responsive: Ensure content adapts to different screen sizes
Copy the Embed Code
- After setting your preferences, click Generate Code
- An HTML embed code will be created for your project
- Click Copy to copy the code to your clipboard
- Keep this code ready for the next step
Important: The embed code is HTML and must be inserted into an HTML module in HubSpot. You cannot paste it into a regular text module.
Insert into HubSpot Email
Now add the embedded content to your HubSpot email:
- Open HubSpot and navigate to your email editor
- Create a new email or open an existing draft
- In the email editor, click to add a new module
- Search for and select the HTML module (sometimes called "Custom HTML")
- Paste the embed code you copied from Marq into the HTML module
- The embedded Marq content should appear in your email
Test the Embedded Email
Always test before sending to your entire list:
- In HubSpot, set up a Test Email
- Send the test to yourself
- Open the test email in your inbox
- Verify:
- Content displays correctly
- Design looks good on desktop and mobile
- Links are clickable
- CTAs work as expected
- Content fits well in the email layout
- Make adjustments if needed and test again
Send Your Email
Once testing is complete:
- Finish designing the rest of your email (subject line, preview text, etc.)
- Set up your recipient list and sending schedule
- Review all email settings
- Send or schedule your email campaign
Best Practices for Email Embeds
Design Considerations
- Email-Safe Width: Keep content width at 600px or less for optimal display
- Mobile-First: Design with mobile viewing in mind (many recipients read email on phones)
- Clear Hierarchy: Most important information and CTAs should be immediately visible
- Contrasting CTAs: Make buttons and links stand out with contrasting colors
- Readable Fonts: Use web-safe fonts that display well across email clients
Content Strategy
- Single Focus: Each embedded piece should have one clear purpose or CTA
- Compelling Copy: Use persuasive, benefit-driven language
- Visual Appeal: High-quality images and professional design increase engagement
- Brand Consistency: Match your email design to your overall brand identity
- Value Proposition: Clearly communicate what recipients gain by clicking
Technical Best Practices
- Test Across Clients: View your email in multiple email clients (Gmail, Outlook, Apple Mail)
- Check Mobile: Test on actual mobile devices, not just desktop simulators
- Optimize Load Time: Keep embedded content lightweight for fast loading
- Fallback Options: Ensure there's a text alternative if images don't load
- Alt Text: Include descriptive alt text for images
Link Management
- Use UTM Parameters: Track where your traffic comes from by adding UTM codes to links
- Test All Links: Click every link in your test email to verify they work
- Landing Page Match: Ensure the landing page continues the email's design and message
- Clear Destination: Link text should indicate where the link goes
Use Cases for Embedded Content
Event Invitations
- Visually striking event announcements
- Interactive "Register Now" buttons
- Event details displayed beautifully
- Direct links to registration pages
Product Launches
- Eye-catching product showcases
- "Shop Now" or "Learn More" CTAs
- Feature highlights with rich design
- Links to product pages or demo videos
Newsletters
- Branded newsletter headers
- Feature article teasers with links
- Multiple CTAs for different content sections
- Visually organized content blocks
Promotional Campaigns
- Sale or discount announcements
- Limited-time offer CTAs
- Coupon codes prominently displayed
- Shopping links embedded directly
Educational Content
- Webinar invitations
- Course enrollment CTAs
- Resource download links
- Content library highlights
Troubleshooting
Embed Not Displaying
- Verify you used the HTML module in HubSpot (not a text or rich text module)
- Check that you copied the complete embed code from Marq
- Ensure the project is published (not just saved as a draft)
- Try refreshing the email editor after pasting the code
Links Not Working
- Verify links were added to elements in your Marq project before generating the embed code
- Test links in the Marq editor before embedding
- Check that URLs are complete (including https://)
- Ensure links aren't blocked by email client security settings
Display Issues on Mobile
- Reduce the embed width (try 600px or less)
- Simplify the design for better mobile rendering
- Test on actual mobile devices
- Consider creating a mobile-specific version
Content Looks Different in Email
- Email clients render HTML differently than web browsers
- Use email-safe fonts and simple layouts
- Avoid advanced CSS that may not be supported
- Test across multiple email clients (Gmail, Outlook, Yahoo, etc.)
Measuring Success
Key Metrics to Track
- Open Rate: How many recipients opened your email
- Click-Through Rate: Percentage who clicked links in your embedded content
- Conversion Rate: How many completed the desired action (purchase, registration, etc.)
- Bounce Rate: Emails that couldn't be delivered
- Unsubscribe Rate: Recipients who opted out
A/B Testing Ideas
- Test different CTA button colors
- Compare embedded content vs. traditional email layouts
- Test various headline and copy options
- Experiment with image placement and size
- Try different subject lines
Optimization
- Review which CTAs get the most clicks
- Identify content that drives best conversion rates
- Refine designs based on performance data
- Segment audiences and personalize embedded content
Frequently Asked Questions
Will embedded content work in all email clients?
Most modern email clients support embedded HTML content. However, some older clients or strict security settings may not display embedded content perfectly. Always test across multiple email clients.
Can I update the embedded content after sending the email?
If you update your Marq project after sending the email, changes will reflect in the embedded version if it's linking to a live URL. However, for best practices, finalize content before sending.
Is there a file size limit for embedded content?
While there's no strict limit, keep embedded content lightweight (under 1MB total) for faster loading and better email deliverability.
Can I embed multiple Marq projects in one email?
Yes, you can add multiple HTML modules to a single email and paste different Marq embed codes into each one.
Do embedded projects count against my email size limit?
Embedded content doesn't significantly increase email size since it's loaded from an external source. However, the embed code itself adds a small amount to your email's HTML.
Can recipients forward emails with embedded content?
Yes, embedded content will typically display when the email is forwarded, assuming the recipient's email client supports HTML content.
Related Resources
- HubSpot Integration Overview
- Sharing and Exporting Your Projects
- Publishing Projects on the Web
- Creating Your Design in Marq
- Adding Links to Your Projects
Create Engaging Email Experiences
Embedding Marq content in your HubSpot emails transforms ordinary messages into rich, interactive experiences that drive engagement and conversions. With beautiful designs, working CTAs, and professional branding, your emails will stand out in crowded inboxes and deliver results.