Campaigns Embed Block

Campaigns is available to customers with the ABM Package. If you are not on this plan and would like to learn more, please reach out to your Mutiny Rep for assistance.  If you are unsure who your rep is, our support team can help you out by submitting a ticket at the bottom of the page! 

The Embed Block allows you to incorporate external content such as forms, videos, calendars, or other embeddable elements into your microsite in the Campaigns product. It provides flexibility to enhance your microsite with interactive or multimedia content.

When to Use the Embed Block

The Embed Block is recommended for:

• Embedding forms for lead capture or feedback
• Including videos or animations
• Incorporating content from third-party platforms

Elements

The Embed Block includes the following customizable elements:

Header

• Default: Uses H2 heading style from your theme
• Purpose: Main heading for the embedded content section
• Customization: Click directly on the header to edit text
• Best Practice: Clear, descriptive heading that explains the embedded content

Subheader

• Default: Uses H3 heading style from your theme
• Purpose: Additional context or supporting statement
• Customization: Click directly on the subheader to edit text if enabled in settings
• Best Practice: Provide additional information about the embedded content

Embed Content

• Options: Embed Code or Embed URL
• Purpose: Contains the external content to be displayed
• Customization:
  • Click the kebab menu (three dots) next to the embed content area
  • Choose between "Embed Code" or "Embed URL"
  • For Embed Code: Paste code snippet from external source
  • For Embed URL: Provide URL to content that supports iframe embedding
• Dimensions: Specify absolute height and width in pixels
• Best Practice: Use code or URL exactly as provided by the source platform

Layout & Styling Options

To access the Embed Block settings, click on the block and then click the settings icon (wrench icon).

Text Color

• Options: Light or Dark
• Customization: Select based on your background color
• Best Practice: Ensure high contrast for readability

Background Color

• Default: Varies based on your theme
• Customization: Select from your brand color palette
• Best Practice: Choose a color that complements the embedded content

Layout Options

The Embed Block offers four layout options:

• Right: Text on left, embed on right
• Left: Text on right, embed on left
• Below: Text above, embed below
• No Text: Embed only, no text elements

Subheader Toggle

• Default: Varies based on layout option selected
• Customization: Turn on or off as needed in the settings menu

Embed Dimensions

• Absolute Height: Height in pixels
• Absolute Width: Width in pixels
• Best Practice: These dimensions are often specified in the embed code from the original platform and should be set to ensure proper rendering

How to Edit the Embed Block

1. Access Block Settings: Click on the Embed Block, then click the settings icon (wrench icon) to access block-specific layout and styling options:

   • Select light or dark text
   • Choose the background color
   • Select layout (right, left, below, or no text)
   • Toggle subheader on/off

2. Edit Text Elements: Click directly on each text element to edit:

   • Edit header and subheader (if enabled) text

3. Edit Embed Content:

   • Click the kebab menu (three dots) next to the embed content area
   • Choose between "Embed Code" or "Embed URL"
   • For Embed Code: Paste the code snippet
   • For Embed URL: Enter the URL
   • Update the absolute height and width values (in pixels)
   • These dimensions are often specified in the code snippet or in the original platform and ensure your object renders correctly

Best Practices for Embed Block

1. Use reliable sources: Embed content only from trusted, stable platforms
2. Set appropriate dimensions: Ensure the embedded content has sufficient space to display properly
3. Test across devices: Check how embedded content appears on different screen sizes
4. Consider loading times: Embedded content can impact page load performance
5. Provide context: Use the header and subheader to explain what the embedded content is
6. Respect privacy: Ensure any embedded content complies with privacy regulations
7. Have fallbacks: Consider what users will see if the embedded content fails to load

Common Questions

Q: What types of content can I embed? A: Common embeddable content includes:

• Forms (e.g., HubSpot, Marketo, Typeform)
• Videos (e.g., YouTube, Vimeo, Wistia)
• Calendars or scheduling widgets (e.g., Calendly)
• Social media feeds
• Maps
• Surveys

Q: How do I find the embed code for content? A: Most platforms that support embedding provide an "Embed" or "Share" option that generates the necessary code. Look for these options in the content settings or sharing menu of the platform you're using.

Q: Why isn't my embedded content displaying correctly? A: This could be due to:

• Incorrect embed code or URL
• Insufficient height or width dimensions
• Content source restrictions
• Browser security settings

Try adjusting the dimensions, verifying your code or URL, and ensuring the content source allows embedding on external sites.

Q: Does embedded content affect page load times? A: Yes, embedded content can impact page performance. To minimize this:

• Use lightweight embeds when possible
• Avoid embedding multiple heavy elements on the same page
• Test page performance after adding embedded elements

Need Help?

If you have questions or need help, the Mutiny Support team is here for you!  You can submit a support ticket at the bottom of this page or reach us at support@mutinyhq.com.