help-center-cms

Blog

  • Embedded vs Popup Forms

    This guide explains how to choose between an embedded form and a popup form in Sender, including how each type displays, how their builder settings differ, and how to distribute them.

    Where to Find This Feature

    In the Sender dashboard, go to Forms in the left sidebar. The Forms list shows all your existing forms with their type label (Embedded form or Pop-up) displayed below the form name. To select a form type, click Create a new form in the top-right corner. The New form page presents three form type cards: Embedded form, Popup form, and Spin-to-win wheel. The form type is set at creation and cannot be changed afterward.

    Steps to Choose and Configure the Right Form Type

    Step 1 — Decide Which Form Type Fits Your Use Case

    Choose Embedded form when you want the form to sit directly inside your page content, always visible to visitors without any overlay or trigger. Choose Popup form when you want an overlay that appears based on visitor behavior, such as time on page, scroll position, or exit intent.

    Embedded forms are best for persistent signup placements like sidebars, footers, or in-content sections. Popup forms work best for attention-grabbing, time-sensitive, or behavior-based prompts.

    Step 2 — Create the Form with the Selected Type

    Go to Forms and click Create a new form. Enter a name in the Form name field. Click Create new embedded form or Create new popup under the corresponding card.

    For embedded forms, a layout selection dialog appears with options such as Default and Basic. Select a layout to open the form builder.

    Step 3 — Review Builder Tabs for Your Form Type

    The form builder for an embedded form has two tabs in the right panel: Design and Settings. The Settings tab includes Options (such as Use Google reCaptcha, Confirmation checkbox, Redirect after submit, and Text direction Right to Left), Fields, and Groups.

    A popup form has three tabs: Design, Settings, and Behaviour. The Settings tab is the same for both types. The Behaviour tab is exclusive to popup forms.

    Step 4 — Configure Popup Triggers in the Behaviour Tab

    Open the Behaviour tab in the popup form builder. Under When to show popup?, enable one or more triggers. After X seconds on page displays the popup after a set delay. Show when user scrolls to X % triggers at a scroll depth. Show when trying to leave page fires on exit intent after a minimum wait time (does not work on mobile devices). Show when clicked on element triggers the popup when a visitor clicks a specified page element.

    Step 5 — Set Popup Frequency, Schedule, and Visibility

    Still in the Behaviour tab, expand Frequency to control how often the popup re-appears for visitors who haven't subscribed. Toggle Always show or set a cooldown period in days.

    Under Schedule, choose Instant to activate immediately or Specific time to set a start and end date. Under Visibility, select Always show, Hide on specific pages, or Show on specific pages, and optionally check Hide on desktop, Hide on mobile devices, or Hide on tablet devices.

    Step 6 — Save and Review Publishing Settings

    Click Save and continue in the top-right corner of the form builder. The Publishing settings page opens, displaying the form's type tag (EMBED or POPUP), status (DRAFT or published), Double opt-in settings, Your form URL, the Get your QR code section, and the JavaScript snippet and JavaScript explicit rendering tabs.

    Both form types share the same Publishing settings layout except that embedded forms include an additional HTML <div> placement element alongside the JavaScript snippet.

    Step 7 — Install the JavaScript Snippet on Your Website

    Under the JavaScript snippet tab, copy the <script> block and paste it before the closing </head> tag on your website. You only need to add this snippet once, even if you use multiple forms.

    For embedded forms, also copy the <div> element (with the class="sender-form-field" and data-sender-form-id attributes) and place it in your page HTML where you want the form to appear. Popup forms do not require a placement <div> — the popup overlays the page automatically based on your Behaviour settings.

    Step 8 — Publish the Form

    On the Publishing settings page, click Publish in the top-right corner. The form status changes from DRAFT to active. Visitors on pages where the snippet is installed will now see the form according to its type and configuration.

    Form Type Comparison

    Embedded form — Use when you want a stationary form placed directly in your page content, such as a sidebar, footer, or inline section. The form is always visible and does not overlay the page. The builder includes Design and Settings tabs. Requires both a JavaScript snippet and an HTML <div> element for placement.

    Popup form — Use when you want an overlay form triggered by visitor behavior. The builder includes an additional Behaviour tab with trigger, frequency, schedule, and visibility settings. Only the JavaScript snippet is needed — no <div> placement element is required.

    Spin-to-win wheel — Use when you want a gamified lead capture experience that motivates visitors to sign up with the chance to win a reward. Like the popup, it overlays the page and includes behavior-based trigger settings.

    Distribution Tips

    Use the form URL for non-website sharing — Copy the URL from the Your form URL field on the Publishing settings page to share your form directly via email, social media, or messaging without embedding it on a site.

    Download or share the QR code — In the Get your QR code section, select a size from the dropdown and click Download to save the QR code image. Use it on printed materials, event signage, or any offline channel to direct people to your form.

    Use JavaScript explicit rendering for custom control — Switch to the JavaScript explicit rendering tab on the Publishing settings page to prevent automatic form loading. Add explicit=true and onload=yourCustomCallback parameters to the resource URL, then call senderForms.render() in your code to control exactly when and where the form appears.

    Send the snippet to your developer — If you don't have access to your website code, click Send code snippet at the bottom of the JavaScript snippet tab to email the integration instructions to a team member.

    Install the snippet once for multiple forms — The JavaScript snippet is account-level. Add it to your site once, and all published forms (embedded and popup) tied to your account will load on pages where the snippet is installed, subject to each form's visibility and trigger rules.

    Common Issues

    Embedded form does not appear on the page → The HTML <div> element with class="sender-form-field" and the matching data-sender-form-id attribute is missing or placed incorrectly. Verify that both the <script> block is before the closing </head> tag and the <div> is in the page body where you want the form to render.

    Popup does not trigger on the website → The form is still in DRAFT status. Go to the Publishing settings page and click Publish. Also confirm the JavaScript snippet is installed on the page and check the Behaviour tab to ensure at least one trigger is enabled.

    Popup shows on every page load → The Frequency setting under the Behaviour tab may be set to Always show. Uncheck Always show and set a cooldown period (e.g., 30 days) so the popup only reappears after the specified interval.

    Exit intent trigger does not work on mobile → The Show when trying to leave page trigger does not work on mobile devices. This is a browser limitation noted in the Behaviour tab. Use After X seconds on page or Show when user scrolls to X % as alternative triggers for mobile visitors.

    Cannot change a form's type after creation → The form type is locked at creation. To switch from embedded to popup (or the reverse), use the Duplicate option from the action menu on the Forms list or the Actions dropdown on the Publishing settings page, then create a new form with the desired type and reconfigure the settings.

    FAQs

    What is the difference between an embedded form and a popup?

    An embedded form is placed directly within your page content using an HTML <div> element and is always visible. A popup overlays the page and appears based on trigger rules you define in the Behaviour tab, such as time on page, scroll depth, or exit intent.

    Can I share my form without embedding it on a website?

    Yes. Every published form has a direct form URL you can copy from the Publishing settings page and share via email, social media, or messaging. You can also download or scan the QR code from the same page to share the form offline.

    Can I use the same form on multiple pages?

    Yes. The JavaScript snippet from the Publishing settings page can be added to any page on your website. The form will appear on every page where the snippet is installed, subject to your Visibility settings in the Behaviour tab (for popups) or the <div> placement (for embedded forms).

    Can I change a form's type after creating it?

    No. The form type is set during creation. To switch types, click the dropdown arrow next to the form on the Forms list, select Duplicate, then create a new form with the desired type and reconfigure the settings.

    Does a popup form need an HTML element on the page like an embedded form does?

    No. A popup form only requires the JavaScript snippet in your site's <head> section. It overlays the page automatically based on the trigger rules in the Behaviour tab. Only embedded forms need the additional <div> element with the data-sender-form-id attribute placed in the page body.

    What triggers are available for popup forms?

    The Behaviour tab offers four trigger options: After X seconds on page, Show when user scrolls to X %, Show when trying to leave page (exit intent, desktop only), and Show when clicked on element. You can enable multiple triggers simultaneously.

  • Saved Blocks and Global Styles

    This guide explains how to save sections for reuse and configure global styles in Sender's drag-and-drop email editor.

    Where to Find These Features

    Saved sections are managed at the section level. Select any section on the canvas to reveal the section toolbar, which includes the Save section icon (bookmark). Saved sections are stored under Section templates → My saved sections in the left sidebar.

    Global styles are configured in the Template settings panel. Click the Template settings icon (the settings card icon) in the left sidebar to open it. This panel contains collapsible sections for General settings, Headlines, Paragraph, Buttons, Separator, Section settings, and Preview & Unsubscribe.

    Steps to Save and Reuse Sections

    Step 1 — Save a Section to Your Library

    Click the edge or label of any section on the canvas to select it. The section toolbar appears above the section with six icons. Click the Save section icon (bookmark). A Save section to my library dialog opens with a Name field pre-filled with the section's name. Edit the name if needed, then click Save. The section is now stored in your personal library.

    Step 2 — Reuse a Saved Section

    Click the Section templates icon in the left sidebar to open the panel. Select My saved sections at the top of the category list. A secondary panel opens showing thumbnail previews of all saved sections with their names. Drag a saved section from this panel onto the canvas to insert it into your email at the desired position.

    Step 3 — Configure Global Styles

    Click the Template settings icon in the left sidebar. Expand any style category — Headlines, Paragraph, Buttons, Separator, Section settings, or Preview & Unsubscribe — to reveal its global settings. Adjust values such as Font family, Font size, Font color, Alignment, or Line height. Changes apply to all matching blocks in the email that have not been individually customized.

    Step 4 — Overwrite or Revert Individual Block Styles

    When a block has been individually styled, its settings panel displays an orange asterisk (*) next to each customized property. Click Revert to default style in the block's settings panel to reset it to the current global style.

    Alternatively, after customizing a single block, click Apply this style to all headlines (or the equivalent button for the block type) to push that block's custom style to all blocks of the same type.

    In Template settings, if blocks have custom overrides, a notice such as "You have 4 paragraphs with custom styling" appears with an Overwrite custom styles button that resets all overrides.

    Available Settings

    General Settings

    Background color — Sets the outer background color surrounding the email content area. Accepts a hex color value.

    Content background color — Sets the background color of the main email content area. Accepts a hex color value.

    Background image — Adds a background image behind the entire email. Click Change to upload or select an image.

    Language — Sets the language direction for the email template. Select a value from the dropdown.

    Preheader text — Defines the preview text shown in the inbox next to or below the subject line. Enter text in the input field.

    Headlines

    Type — Switches between H1, H2, and H3 heading levels. Each level stores its own set of global styles.

    Font family — Sets the default font for all headline blocks of the selected type. Choose from the dropdown.

    Font color — Sets the default text color for headlines. Accepts a hex color value.

    Font size — Sets the default size in pixels for headlines. Use the stepper control to adjust.

    Alignment — Sets the default text alignment: left, center, or right.

    Font styling — Applies default formatting: Bold, Italic, Underline, or Strikethrough.

    Link color — Sets the default color for links inside headline blocks. Accepts a hex color value.

    Line height — Controls the default vertical spacing between lines. Entered as a percentage value.

    Paragraph

    Font family — Sets the default font for all paragraph blocks. Choose from the dropdown.

    Font color — Sets the default text color. Accepts a hex color value.

    Font size — Sets the default paragraph font size in pixels.

    Alignment — Sets the default text alignment: left, center, right, or justify.

    Link color — Sets the default color for links inside paragraph blocks.

    Line height — Controls the default vertical spacing between lines as a percentage value.

    Buttons

    Color — Sets the default button background fill color.

    Alignment — Sets the default button position: left, center, or right.

    Corner radius — Controls how rounded the button corners are. Adjust using the slider or enter a pixel value.

    Width — Toggles between auto-width (sized to text) and full-width (spans the column).

    Padding (Horizontal / Vertical) — Sets the internal spacing around the button text.

    Button spacing — Controls the gap between multiple buttons in the same block.

    Font family — Sets the default font for button text.

    Font color — Sets the default button text color.

    Font size — Sets the default button text size in pixels.

    Font styling — Applies default formatting to button text: Bold, Italic, Underline, or Strikethrough.

    Border Style — Sets the default button border style: solid, dotted, dashed, or double.

    Border Color — Sets the default border color.

    Border Width — Sets the default border thickness in pixels.

    Separator

    Style — Sets the default separator line style: none, solid, dotted, dashed, or double.

    Color — Sets the default separator line color. Accepts a hex color value.

    Thickness — Sets the default separator line thickness in pixels.

    Width — Sets the default separator width as a percentage of the column. Adjust using the slider or enter a value.

    Section Settings

    Spacing (Top, Bottom, Left, Right) — Sets the default internal padding for all sections on desktop.

    Column spacing — Sets the default horizontal gap between columns in multi-column sections on desktop.

    Mobile Spacing (Top, Bottom, Left, Right) — Sets the default internal padding for sections on mobile devices.

    Mobile Column spacing — Sets the default horizontal gap between columns on mobile devices.

    Preview & Unsubscribe

    Font family — Sets the font for the preheader and unsubscribe text at the top and bottom of the email.

    Font color — Sets the text color for the preview and unsubscribe area.

    Font size — Sets the text size for the preview and unsubscribe area.

    View in browser link — Toggles the "View in browser" link visibility. Options: Show or Hide.

    Unsubscribe link — Toggles the unsubscribe link visibility. Options: Show or Hide.

    Block Tips

    Use global styles first — Configure Template settings before editing individual blocks. This establishes a consistent design baseline and reduces the need for per-block adjustments.

    Name saved sections descriptively — When saving a section, edit the default name in the Save section to my library dialog to reflect its purpose, such as "Product Feature 2-Column" or "Footer with Social Links." Descriptive names make sections easier to locate later.

    Watch for the asterisk indicator — An orange asterisk (*) next to a setting name in a block's panel means that property has been customized away from the global style. Use this to quickly identify which blocks have overrides.

    Use Overwrite custom styles carefully — The Overwrite custom styles button in Template settings resets all custom-styled blocks of that type back to the global style. Review your design before clicking, as block-level customizations will be lost.

    Save sections across campaigns — Saved sections persist in My saved sections across all campaigns in your account. Build a library of reusable sections like headers, footers, and product layouts to speed up future email creation.

    Common Issues

    Saved section not appearing in My saved sections → The section may not have been saved successfully. Select the section on the canvas, click the Save section icon in the toolbar, enter a name, and click Save. Verify it appears under Section templates → My saved sections.

    Global style changes not applying to some blocks → Blocks with individual customizations are not affected by global style changes. Open Template settings, expand the relevant category, and click Overwrite custom styles to reset all custom-styled blocks of that type to the global defaults.

    Asterisk appears next to a setting but no change was made → The block may have inherited a custom style from a template or a duplicated section. Click Revert to default style in the block's settings panel to realign it with the current global style.

    Saved section looks different after inserting → Global styles in the current email may differ from the original campaign where the section was saved. Adjust Template settings to match, or update the individual blocks within the inserted section.

    FAQs

    Can I rename or edit a saved section? No. There is no rename or edit option in the My saved sections panel. To update a saved section, delete the existing one by clicking the delete icon on its thumbnail, make changes to the section on the canvas, and save it again with the new name.

    Do global styles affect all campaigns? No. Template settings are scoped to the individual email you are editing. Changing global styles in one campaign does not affect other campaigns.

    What happens when I click Apply this style to all headlines? The current block's custom style replaces the global headline style and is applied to every headline block of the same type (H1, H2, or H3) in the email. Blocks that were previously using the global default will be updated automatically.

    Can I delete a saved section from my library? Yes. Open Section templates → My saved sections, then click the delete icon (trash) in the top-right corner of the saved section's thumbnail. The section is removed permanently from your library.

    Does the Overwrite custom styles button affect all block types? No. It only affects the specific block type within the expanded category. For example, clicking it under Paragraph resets only paragraph blocks, not headlines or buttons.

  • Brand Settings (Colors, Fonts)

    This guide explains how to configure your brand colors, fonts, and global styles in Sender's email editor using Template settings.

    Where to Find This Setting

    All brand-level color and font controls are located in the Template settings panel. In the editor's left sidebar, click the Template settings icon (the fourth icon from the top, resembling a palette). This opens a panel with collapsible sections: General settings, Headlines, Paragraph, Buttons, Separator, Section settings, and Preview & Unsubscribe. Each section controls global defaults for its respective block type across the entire email.

    If you need to save or reuse your branded design as a starting template, use the Template options icon (the third icon from the top in the sidebar), which provides Change template and Save as template options.

    Steps to Configure Brand Settings

    Step 1 — Set Your Brand Background Colors

    In the Template settings panel, expand General settings at the top. Set Background color to your brand's outer background hex value — this controls the color behind the entire email body. Set Content background color to define the background of the content area itself.

    Together, these two values create the foundational color contrast for your email. You can also click Change next to Background image to upload a full-width background image behind the email body.

    Step 2 — Configure Headline and Paragraph Typography

    Expand the Headlines section. Use the Type tabs (H1, H2, H3) to configure each heading level independently. For each type, set Font family from the dropdown, which offers Web Safe Fonts (Arial, Georgia, Verdana, Times New Roman, etc.) and Custom Fonts (Google Fonts such as Arvo, Cabin, and others). Set your brand's Font color, Font size, Alignment, and Line height. Use Font styling to apply bold, italic, underline, or strikethrough. Set Link color to match your brand's accent color for any links within headlines.

    Then expand Paragraph and repeat the same process — set Font family, Font color, Font size, Alignment, Link color, and Line height. If blocks in your email were previously customized individually, a notice will appear stating how many have custom styling. Click Overwrite custom styles to apply your new global paragraph settings to all paragraph blocks at once.

    Step 3 — Style Buttons to Match Your Brand

    Expand the Buttons section. Under BUTTON STYLES, set Color to your brand's primary action color — this controls the button fill. Adjust Alignment (left, center, or right), Corner radius (in px) for rounded or sharp corners, and Width to toggle between auto-width or full-width buttons. Under PADDING, configure Horizontal and Vertical values to control internal button spacing, and set Button spacing for distance between stacked buttons.

    Under TYPOGRAPHY, choose a Font family, set the Font color for button text (commonly white over a colored fill), adjust Font size, and apply Font styling as needed. Under BORDERS, select a border Style (solid, dotted, dashed, or double), set the Color, and define the Width in pixels. If any buttons have been individually customized, click Overwrite custom styles to unify them with these global settings.

    Step 4 — Verify Your Brand Colors in Dark Mode

    Click the Preview button (eye icon) in the top toolbar. The editor displays your email in both desktop and mobile views. Toggle Dark mode preview in the top-right corner of the preview screen to see how your background colors, text colors, button fills, and images adapt in dark mode email clients.

    Review both views to confirm your brand colors remain legible and your content background provides sufficient contrast against the inverted dark mode backgrounds.

    Design Best Practices

    Match link colors across all text types — Set the same Link color value in both Headlines and Paragraph sections within Template settings to ensure hyperlinks appear consistent throughout the email.

    Use Content background color for contrast — Set Content background color to white or a light brand shade and Background color to a darker or neutral tone. This creates a clear visual boundary between the email body and the surrounding area.

    Apply global styles before customizing individual blocks — Configure all values in Template settings first, then only override at the block level where necessary. This reduces inconsistencies and makes the Overwrite custom styles button more effective when you need to reset.

    Keep button typography simple — Use the same Font family for button text as your paragraph text. Set Font size to 14–16 and ensure the Font color contrasts sharply against the button Color fill for readability.

    Test dark mode early — Toggle Dark mode preview each time you change background colors or text colors. Some color combinations that work in light mode may lose contrast or become unreadable in dark mode clients.

    Common Issues

    Global font changes not applying to all blocks → Blocks that were individually styled before the global change retain their custom settings. Open the relevant section in Template settings (e.g., Paragraph or Buttons) and click Overwrite custom styles to force the global values onto all existing blocks.

    Button color looks different in dark mode → Some dark mode email clients override background colors. Use the Dark mode preview toggle in the Preview screen to identify affected buttons, and consider using higher-contrast color pairings.

    Font family not rendering as expected → Fonts listed under Custom Fonts (Google Fonts) may not render in all email clients. Email clients that do not support the selected font will fall back to the closest Web Safe Font. Choose a web-safe fallback that closely matches your brand typeface.

    FAQs

    How do I ensure my brand colors are consistent across all blocks?

    Configure your primary colors in Template settings under each section — Headlines, Paragraph, and Buttons. This sets the global default. Blocks that have been individually customized will need to be reset using Overwrite custom styles.

    Can I preview how my email looks in dark mode?

    Yes. Click the Preview button (eye icon) in the top toolbar, then toggle Dark mode preview in the top-right corner to see how your colors, backgrounds, and images adapt in dark mode email clients.

    How do I create a reusable branded template?

    Design your email with all brand styles applied in Template settings, then click the Template options icon in the left sidebar and select Save as template. You can select this template as a starting point for future campaigns.

    What is the difference between Background color and Content background color? 

    Background color controls the outer area surrounding the email body — the frame visible behind the content. Content background color controls the background of the main content area where your blocks are placed. Using both together creates a layered visual effect.

    Can I use Google Fonts in my email?

    Yes. The Font family dropdown in Template settings includes both Web Safe Fonts and Custom Fonts (Google Fonts). Select any available Google Font, but note that email clients that do not support it will display the closest web-safe fallback instead.

  • Mobile Responsiveness

    This guide explains how to ensure your email adapts correctly across mobile devices, desktop clients, and varying screen sizes in Sender's drag-and-drop email editor.

    Where to Find This Setting

    Mobile responsiveness controls are spread across multiple locations in the editor:

    Section settings — Click any section label (e.g., Section: Headline & Image) on the canvas to open the right-side panel. Here you'll find MOBILE SPACING values and Visibility on mobile and Visibility on desktop toggles.

    Column settings — Select any block, then expand Column settings at the bottom of the right-side panel. This contains the Visibility on mobile toggle with Show and Hide options.

    Template settings — Click the Template settings icon in the left sidebar, then expand Section settings to configure global SPACING and MOBILE SPACING defaults that apply across all sections.

    Preview — Click the Preview button (eye icon) in the top toolbar to view desktop and mobile renderings side by side, along with the Dark mode preview toggle.

    Steps to Optimize Your Email for Mobile

    Step 1 — Adjust Mobile Spacing at the Section Level

    Click a section on the canvas to open Section settings in the right panel. Scroll to the MOBILE SPACING area. Set Top, Bottom, Left, and Right values independently from your desktop SPACING values.

    Reduce Left and Right padding to give content more room on narrow screens. Set Column spacing to 0 to eliminate gaps between stacked columns on mobile. Verify your changes in the Preview tool.

    Step 2 — Control Column and Section Visibility by Device

    In Section settings, locate Visibility on desktop and Visibility on mobile. Toggle either to Hide to prevent that section from displaying on the corresponding device type.

    For column-level control, select a block inside the column, expand Column settings, and set Visibility on mobile to Hide to remove that specific column on smaller screens. Use this to show simplified layouts on mobile while keeping richer content on desktop.

    Step 3 — Preview Across Devices and Dark Mode

    Click the Preview button in the top toolbar. The editor displays a desktop view on the left and a mobile view on the right, side by side. Toggle Dark mode preview in the top-right corner to see how your colors, backgrounds, and text render in dark mode email clients.

    Review how multi-column layouts (e.g., 50/50, 33/33/33) stack vertically in the mobile preview. Use Send test email in the top toolbar to send a rendered version to your inbox and verify rendering in actual email clients.

    Step 4 — Fine-Tune Block Spacing and Alignment for Mobile

    Select any block and expand Block settings in the right panel. Adjust SPACING values (Top, Bottom, Left, Right) to control padding around individual blocks.

    For the Logo block, use the separate Alignment on mobile setting to override the desktop alignment — for example, centering a logo on mobile even if it's left-aligned on desktop. Check the mobile preview after each adjustment to confirm the layout holds.

    How It Renders

    Desktop email clients — Sections display at their full configured width with desktop SPACING values applied. Multi-column layouts such as 50/50 or 67/33 render side by side as designed. Visibility on desktop set to Hide removes the section from desktop rendering only.

    Mobile email clients — Columns automatically stack vertically on smaller screens, following left-to-right, top-to-bottom order. MOBILE SPACING values override desktop spacing. Columns or sections with Visibility on mobile set to Hide do not appear. Images scale to fill the available width of the stacked column.

    Dark mode — Email clients that enforce dark mode may invert background colors and adjust text for contrast. The Dark mode preview toggle in the editor provides an approximation. Light backgrounds may turn dark, and dark text may turn light. Behavior varies across clients — Apple Mail, Gmail, and Outlook each apply dark mode transformations differently.

    Webmail clients (Gmail, Yahoo, Outlook.com) — Most webmail clients support responsive stacking. Gmail clips emails larger than 102 KB, which may affect complex layouts. Background images may not render in some webmail environments — the Content background color or Section background color serves as a fallback.

    Display Tips

    Test with real inboxes — The Preview tool gives a close approximation, but always use Send test email to verify rendering in your most common recipient clients, particularly Gmail, Apple Mail, and Outlook.

    Reduce mobile padding — Desktop-friendly Left and Right spacing values often feel too wide on mobile. Set MOBILE SPACING left and right values lower than their desktop equivalents to maximize content width on small screens.

    Use single-column layouts for critical content — A 100-width section ensures consistent rendering across all clients without relying on column stacking. Reserve multi-column layouts for content that remains readable when stacked.

    Set fallback background colors — Some email clients strip background images. Always define a Section background color or Content background color that maintains sufficient contrast with your text if the background image fails to load.

    Keep email size under 102 KB — Gmail clips emails that exceed 102 KB. Monitor the Email size indicator shown at the top left of the Preview screen and simplify your design if the file size is too high.

    Common Issues

    Columns do not stack on mobile → This typically occurs when viewing in a non-responsive email client or when the email is rendered inside a desktop webmail wrapper. Most modern mobile clients stack columns automatically. Verify by sending a test email and opening it on an actual mobile device.

    Mobile spacing looks the same as desktop → The MOBILE SPACING values in Section settings may still match the desktop SPACING defaults. Open Section settings for the affected section and adjust the MOBILE SPACING values independently. You can also set global mobile spacing defaults under Template settings → Section settings.

    A section or column is missing on mobile → Check the Visibility on mobile toggle. In Section settings, confirm it is set to Show. For columns, select a block inside the column, expand Column settings, and verify Visibility on mobile is set to Show.

    Dark mode changes my brand colors → Dark mode behavior is controlled by each email client and cannot be fully overridden from the editor. Use high-contrast color pairings, avoid pure white (#ffffff) backgrounds where possible, and test with Dark mode preview enabled. Some clients will invert colors regardless of your settings.

    Images appear too large or overflow on mobile → Images in the editor scale to fit the column width by default. If an image still overflows, check that the parent section's MOBILE SPACING left and right values are not set to zero, which could push content edge-to-edge. Ensure the image block's SPACING values in Block settings provide adequate breathing room.

    FAQs

    Why do my columns stack on mobile?

    Columns automatically stack vertically on smaller screens to maintain readability. This is standard responsive behavior in Sender's editor. You can hide specific columns on mobile by setting Visibility on mobile to Hide in Column settings.

    Does the Preview tool show exactly how my email will look in every client?

    The Preview tool provides a close approximation for desktop and mobile layouts, including a Dark mode preview toggle. However, email clients render HTML and CSS differently. Always send a test email using Send test email to verify rendering in your most important target clients.

    How do I prevent dark mode from changing my background colors?

    Dark mode behavior varies by email client and cannot be fully controlled from the editor. Use high-contrast color pairings and enable Dark mode preview to identify potential issues. Define a solid Section background color as a fallback. Some clients will override your colors regardless of your settings.

    Can I set different padding for mobile and desktop?

    Yes. Each section has separate SPACING (desktop) and MOBILE SPACING controls in Section settings. You can set different Top, Bottom, Left, Right, and Column spacing values for each device type. Global defaults for both can also be configured under Template settings → Section settings.

    In what order do columns stack on mobile?

    Columns stack in left-to-right order, meaning the leftmost column appears at the top on mobile. When designing multi-column sections like 50/50 or 33/33/33, place the most important content in the leftmost column so it appears first on mobile devices.

  • Dark Mode Emails

    This guide explains how to preview and optimize your email for dark mode rendering in Sender's drag-and-drop email editor.

    Where to Find This Setting

    The primary dark mode control is in the Preview tool. Click the Preview button (eye icon) in the top toolbar to open the preview panel, which displays your email in both desktop and mobile views. The Dark mode preview toggle appears in the top-right corner of this panel.

    Color settings that influence dark mode rendering are located across multiple panels. Background color and Content background color are found under Template settings → General settings in the left sidebar. Per-section colors are set in Section settings on the right panel when a section is selected. Per-block and per-column background colors are available in Block settings and Column settings when any content block is selected. Text color and Link color are configured within individual block settings, such as Headline settings or Paragraph settings.

    Steps to Optimize for Dark Mode

    Step 1 — Preview Your Email in Dark Mode

    Click the Preview button in the top toolbar. In the preview panel, locate the Dark mode preview toggle in the top-right corner and switch it on. Both the desktop and mobile previews update immediately to simulate dark mode rendering.

    Review the entire email for any areas where text becomes unreadable, colors lose contrast, or images blend into the dark background.

    Step 2 — Adjust Background and Text Colors for Contrast

    Return to the editor and select any section or block where dark mode caused readability issues. In Template settings → General settings, check that Background color and Content background color use values that produce sufficient contrast when inverted.

    In Section settings, review the Content background color and Section background color. In individual block settings, adjust Text color and Link color to ensure they remain legible against both light and dark backgrounds. Avoid pure white (#ffffff) backgrounds paired with very light text, as dark mode may invert only one of these values.

    Step 3 — Test with a Real Inbox

    Click Send test email in the top toolbar to deliver a test message to your own inbox. Open the email on devices and email clients that support dark mode, such as Apple Mail, Gmail, or Outlook mobile.

    Compare the actual rendering with the editor's Dark mode preview to identify any differences. The preview is an approximation — real-client testing confirms how your design actually appears.

    How It Renders

    Apple Mail (macOS and iOS) — Apple Mail applies a full color inversion in dark mode, swapping light backgrounds to dark and adjusting text colors automatically. Light-colored images with no transparency generally display as expected, while transparent PNGs may show unexpected dark areas behind them.

    Gmail (Android and web) — Gmail's dark mode behavior varies by version and device. On Android, it may invert background colors, tint light backgrounds darker, or leave the email unchanged depending on the color scheme detected. The web version in a dark-themed browser may not apply any dark mode changes to the email itself.

    Outlook (desktop and mobile) — Outlook on Windows uses its own dark mode rendering engine, which can heavily modify background colors and override text colors. Outlook mobile apps generally apply lighter inversions. Buttons and images are typically preserved, but background color swaps can reduce contrast in unexpected areas.

    Yahoo Mail and AOL — These clients apply a partial dark mode that inverts some background colors while preserving others. Results can differ from the editor's preview.

    Display Tips

    Use high-contrast color pairings — Choose text and background colors that maintain readability whether the background stays light or is inverted to dark. Avoid low-contrast combinations like light gray text on white.

    Avoid relying on background images alone — Some email clients strip or fail to render background images. Always set a fallback Background color in Section settings or Column settings to maintain contrast if the image does not load in dark mode.

    Use solid-background images instead of transparent PNGs — Dark mode can fill transparent areas with the inverted background color, causing logos or icons to look distorted. Export images with a solid background to prevent this.

    Check both desktop and mobile previews — Dark mode rendering can differ between the desktop and mobile version of the same email client. Toggle Dark mode preview on and inspect both views in the Preview panel.

    Send test emails to multiple clients — The Dark mode preview toggle is an approximation. Click Send test email and open the message in at least two or three different email clients with dark mode enabled to verify your design.

    Common Issues

    Text disappears in dark mode → The email client inverted the background to dark but the text color remained dark or was not adjusted. Select the affected block, open its settings, and change Text color to a value that contrasts against both light and dark backgrounds, then re-check with Dark mode preview.

    Logo or icon looks broken on a dark background → The image uses a transparent background, and the email client filled the transparent area with a dark color. Re-export the image with a solid background that works on both light and dark surfaces.

    Button color changes unexpectedly → Some email clients override inline background colors in dark mode. Button colors set through the editor are generally preserved, but certain Outlook versions may alter them. Test with Send test email to confirm, and consider using a bold, high-saturation button color that remains visible on dark backgrounds.

    Background color renders differently than the preview → The Dark mode preview is an approximation. Different email clients use different dark mode strategies — some invert all colors, some only adjust backgrounds, and some do nothing. Always verify with test emails sent to real inboxes.

    FAQs

    Can I control exactly how my email appears in dark mode?

    Dark mode rendering is controlled by each email client, not by the sender. The editor does not include settings that override dark mode behavior in recipients' inboxes. You can optimize your color choices and test with Dark mode preview, but the final rendering depends on the email client and its version.

    Does the Dark mode preview show exactly how my email will look?

    No. The Dark mode preview toggle provides a general approximation of dark mode behavior. The tooltip in the editor confirms that due to differences in email clients, browsers, and devices, exact rendering may vary. Always send a test email to verify in your target clients.

    Should I design my email specifically for dark mode?

    Rather than designing exclusively for dark mode, design for both light and dark contexts. Use high-contrast color pairings, avoid transparent image backgrounds, set fallback background colors, and test with the Dark mode preview toggle and Send test email before finalizing your campaign.

    Will dark mode change my button colors?

    Most email clients preserve button background colors in dark mode. However, certain versions of Outlook may adjust them. Use a distinct, saturated button color and verify rendering through test emails.

    Why does my email look different in Outlook dark mode compared to Apple Mail dark mode?

    Each email client applies its own dark mode algorithm. Apple Mail performs a full color scheme inversion, while Outlook on Windows uses a proprietary rendering engine that can change colors more aggressively. There is no universal standard for dark mode in email, so results vary across clients.

  • Using the Drag-and-Drop Editor

    This guide shows you how to build and customize email layouts using Sender's drag-and-drop editor. You'll learn how to navigate the editor interface, add and arrange content blocks, adjust settings, preview your design, and save your work.

    Where to Find This Feature

    In the Sender dashboard, go to: Email campaigns → click the edit (pencil) icon next to any draft campaign → Edit design.

    This opens the drag-and-drop editor. The editor has three main areas: a left sidebar with panels for Building blocks, Section templates, and Template settings; a central canvas where your email design is displayed; and a top toolbar with undo, redo, Preview, Send test email, and Save & continue buttons. When you select a block on the canvas, a settings panel opens on the right side.

    Steps to Build an Email in the Editor

    Step 1 — Get to Know the Editor Layout

    When the editor loads, the Building blocks panel opens on the left by default. The left sidebar includes icon-based tabs for Section templates, Building blocks, Template options, Template settings, Version history, and Keyboard shortcuts.

    A block is a single content element such as a headline, image, or button. The central area is the canvas — this is where you assemble your email by adding and arranging blocks. The top toolbar displays your campaign name, a Changes saved indicator, and action buttons.

    Step 2 — Add a Block to the Canvas

    In the Building blocks panel, you'll see available blocks: Headline, Paragraph, Image, Button, Separator, Logo, Video, Social, Product, Menu, Timer, Review, and Custom HTML.

    Drag any block from this panel and drop it onto the canvas where you want it to appear. A blue drop indicator line shows where the block will land. Release to place the block. It appears immediately on the canvas in the position you chose.

    Step 3 — Select and Edit a Block

    Click any block on the canvas to select it. A block-type settings panel opens on the right side of the screen. For example, clicking a Headline block opens Headline settings with options for Type (H1, H2, H3), Font family, Text color, Link color, Alignment, Font styling (bold, italic, underline, strikethrough), Font size, Line height, and Text direction.

    To edit the text content directly, click the Edit text icon in the block toolbar that appears above the selected block.

    Step 4 — Move, Duplicate, or Delete Blocks

    When you select a block, a toolbar appears above it on the canvas with several action icons. Use Drag block to reposition the block by dragging it. Click Move up or Move down to shift the block one position in either direction. Click Duplicate block to create an identical copy directly below. Click Delete block (trash icon) to remove the block from the canvas.

    Step 5 — Adjust Block and Column Settings

    With a block selected, scroll down in the right panel to find Block settings and Column settings.

    Under Block settings, adjust Spacing values for Top, Bottom, Left, and Right to control padding around the block, and set a Background color.

    Under Column settings, you can change the column's Background color, set Vertical alignment (Bottom, Middle, or Top), and toggle Visibility on mobile between Show and Hide.

    Step 6 — Use Section Templates for Faster Layouts

    Click the Section templates icon (top icon in the left sidebar) to browse pre-built layout sections. Categories include Preheader, Header, Hero, Content, Newsletter, Feature, Call to action, Product, Footer, and Blank.

    You can also access My saved sections to reuse sections you have saved previously. Drag a section template onto the canvas to add a fully structured layout that you can then customize block by block.

    Step 7 — Customize Template-Wide Settings

    Click the Template settings icon in the left sidebar (the globe icon) to open global design controls.

    Under General settings, adjust Background color, Content background color, Background image, Language, and Preheader text. Below that, expand sections for Headlines, Paragraph, Buttons, Separator, Section settings, and Preview & Unsubscribe to set default styles that apply across your entire email.

    Step 8 — Preview, Test, and Save Your Email

    Click the Preview button (eye icon) in the top toolbar to see how your email looks before sending. Use Send test email in the top toolbar to send a test version to an email address and check how it renders in an actual inbox.

    When you're finished, click Save & continue to save your design and return to the campaign workflow. To exit without continuing, click the back arrow next to the campaign name or use Save and go back.

    Editor Tips

    Use section templates to save time — Instead of building every row from scratch, drag a pre-built section from the Section templates panel and customize the placeholder content.

    Check mobile visibility — Open Column settings for any block and use the Visibility on mobile toggle to hide elements that don't work well on smaller screens.

    Set global styles first — Before adding content, configure your fonts, colors, and button styles in Template settings. This ensures a consistent look across all blocks without adjusting each one individually.

    Duplicate blocks instead of rebuilding — If you need a similar block elsewhere in your email, select the original and click Duplicate block in the block toolbar. Then edit the copy as needed.

    Save reusable sections — Use Template options → Save as template to store a finished design for future use. You can also save individual sections through the Section templates panel under My saved sections.

    Common Issues

    Block won't drop onto the canvas → You may be dragging to an invalid position. Make sure you see a blue drop indicator line on the canvas before releasing the block. Drag slowly and position your cursor inside the canvas area.

    Settings panel doesn't appear → The right panel only opens when a block is selected on the canvas. Click directly on a block element (such as a headline or image) to select it and trigger the settings panel.

    Changes are not saving → The editor auto-saves periodically and shows a Changes saved indicator in the top toolbar. If you don't see this confirmation, click Save & continue manually before leaving the editor.

    Top toolbar disappears → The top toolbar hides when you scroll down or when the right settings panel is active. Scroll to the top of the canvas or close any open side panels to bring it back into view.

    FAQs

    Can I undo changes in the editor?

    Yes. Click the undo button (curved arrow) in the top toolbar to reverse your last action. Click redo (forward arrow) to restore it. You can also use keyboard shortcuts — press Ctrl+Z (or Cmd+Z on Mac) to undo and Ctrl+Y (or Cmd+Y) to redo.

    What is the difference between a block and a section?

    A block is a single content element such as a headline, image, paragraph, or button. A section is a larger layout structure that contains one or more blocks arranged in rows and columns. You can add individual blocks from the Building blocks panel or full sections from the Section templates panel.

    Can I reorder blocks without dragging?

    Yes. Select a block on the canvas and use the Move up or Move down icons in the block toolbar to shift it one position at a time.

    How do I change the email background color?

    Open Template settings from the left sidebar. Under General settings, adjust the Background color field to change the outer background or the Content background color field to change the inner content area.

    Does the editor work the same in automations and campaigns?

    Yes. The drag-and-drop editor behaves the same regardless of whether you open it from a campaign, an automation, or a template. All building blocks, settings, and toolbar options are identical.

  • Transactional Email vs Campaign Email

    This guide explains the difference between transactional emails and campaign emails in Sender, and shows you how to identify when to use each type.

    Where to Find This Feature

    In the Sender dashboard, go to: Transactional emails

    Click Transactional emails in the left sidebar to open the transactional email section. You will see a submenu with four pages: Metrics, Logs, Templates, and Setup instructions. This is where you create, manage, and monitor all transactional emails.

    For comparison, campaign emails are located under Email campaigns in the main sidebar.

    Steps to Understand the Difference

    Step 1 — Learn What Transactional Emails Are

    Transactional emails are automated messages triggered by a specific user action or system event. Examples include order confirmations, password resets, shipping notifications, and account verification emails. Each transactional email is sent to one recipient at a time, in direct response to something that person did.

    In Sender, transactional emails are sent through the API (a way for your application to communicate with Sender's servers) or SMTP (a standard email-sending protocol). You will find both options under Transactional emails → Setup instructions.

    Step 2 — Learn What Campaign Emails Are

    Campaign emails are bulk messages sent to a group of subscribers at a scheduled time. Examples include newsletters, promotional offers, product announcements, and weekly digests. You choose the audience and decide when to send.

    In Sender, campaign emails are created under Email campaigns in the left sidebar. You click New campaign, select subscriber groups, design your email, and schedule or send it immediately.

    Step 3 — Compare How Each Type Is Created

    Transactional emails follow a three-stage workflow: Settings → Design → API. You define the email details, build the template, and then connect it to your application using an API token or SMTP credentials. Your application triggers each send automatically.

    Campaign emails follow a different flow. You click New campaign, configure your content, select a subscriber group, and either schedule or send the email manually. There is no API step because Sender handles delivery to your chosen audience directly.

    Step 4 — Compare How Each Type Is Sent

    Transactional emails are sent programmatically. Your application calls the Sender API or connects via SMTP to send an email whenever a triggering event occurs. You generate an API token under Account settings → API access tokens by clicking Create API token, or you set up SMTP credentials under Transactional emails → Setup instructions → SMTP.

    Campaign emails are sent from the Sender dashboard. You click a send or schedule button, and Sender delivers the email to all recipients in the selected subscriber group at once.

    Step 5 — Compare How Each Type Is Tracked

    Transactional email activity appears under Transactional emails → Metrics, which shows the Transactional overview with stats for total emails sent, total delivered, total opens, and total clicks. Detailed delivery events appear under Transactional emails → Logs, called the Latest events log, where each row shows the event type, recipient, subject, template, and date/time.

    Campaign email performance is displayed on the main Dashboard and within each campaign's individual report. Campaign stats include delivered, opened, and clicks per campaign.

    Step 6 — Decide Which Type to Use

    Use transactional emails when the message is triggered by a user action and is expected by the recipient. The content is specific to that individual and that event. Password resets, receipts, and shipping updates are transactional.

    Use campaign emails when you want to send the same message to many people at once. The content is promotional, informational, or editorial. Newsletters, sale announcements, and product launches are campaign emails.

    What Happens Next

    If you need to send transactional emails, go to Transactional emails → Templates and click New email to create your first transactional email template.

    If you need to send campaign emails, go to Email campaigns and click New campaign to build and schedule a campaign.

    To verify that transactional emails are working after setup, check the Latest events log under Transactional emails → Logs for delivery confirmation events.

    Common Issues

    Unsure which type to choose for a specific email → If the email is triggered by a user action (such as a purchase or sign-up) and contains information unique to that user, it is transactional. If you are sending the same content to multiple subscribers on a schedule, it is a campaign email.

    Transactional email not appearing in campaign reports → Transactional emails and campaign emails are tracked separately. Transactional email stats are under Transactional emails → Metrics and Logs, not on the main Dashboard or in campaign reports.

    Trying to send a transactional email without API or SMTP setup → Transactional emails require either an API token or SMTP credentials to send. Go to Account settings → API access tokens to create a token, or go to Transactional emails → Setup instructions → SMTP to configure SMTP.

    FAQs

    What is the difference between transactional and marketing emails?

    Transactional emails are triggered by a user action, such as a purchase or password reset, and contain information specific to that individual event. Marketing (campaign) emails are sent to a list of subscribers to promote content, offers, or updates. In Sender, these are managed in separate sections of the dashboard.

    Can I use the same template for both transactional and campaign emails?

    No. Transactional email templates are created under Transactional emails → Templates, and campaign email templates are created under Email campaigns. Each type has its own creation workflow and delivery method.

    Do transactional emails require an API token?

    Yes, if you are sending via the API. You can create one under Account settings → API access tokens by clicking Create API token. Alternatively, you can send transactional emails using SMTP credentials, which you configure under Transactional emails → Setup instructions → SMTP.

    Do campaign emails use the API to send?

    No. Campaign emails are sent directly from the Sender dashboard. You select your subscriber group, schedule or send the campaign, and Sender handles delivery. No API integration or SMTP setup is required.

    Where do I monitor transactional email delivery?

    Go to Transactional emails → Logs to view the Latest events log. This page shows every delivery event including the event type, recipient, subject, template name, and timestamp. For high-level stats, check Transactional emails → Metrics.

  • Transactional sender identity and domain requirements

    This guide explains how to configure your sender identity and verify your sending domain for transactional emails in Sender.

    Prerequisites

    • An active Sender account
    • A verified domain with DNS access to add SPF, DKIM, and DMARC records
    • An API access token or SMTP user credentials (see Account settings → API access tokens or Setup instructions → SMTP)
    • A valid email address on the domain you plan to send from

    Where to Find This Setting

    In the Sender dashboard, go to Transactional emails → Setup instructions to configure your sending method and sender identity at the API or SMTP level.

    To manage domain verification and authentication, go to Account settings → Domains. This page displays a table with columns for Domain, Ownership confirmed, Authentication (showing individual status indicators for SPF, DKIM, and DMARC), and Custom links. Use this page to add domains, verify ownership, and confirm that DNS authentication records are in place.

    To configure sender identity fields within a specific transactional email template, go to Transactional emails → Templates, then select a template and open its Settings step.

    Steps to Configure Sender Identity and Domain

    Step 1 — Add and verify your sending domain

    In the Sender dashboard, go to Account settings → Domains and click Add domain. Enter your domain name in the Domain field (e.g., yourdomain.com) and click Next. Sender will prompt you to verify ownership by adding a DNS record.

    After adding the required DNS record at your domain registrar, return to the Domains page and click Recheck DNS records. Once verified, a green checkmark appears under Ownership confirmed.

    Step 2 — Configure domain authentication records

    On the Domains page, check the Authentication column for your domain. Three indicators represent SPF, DKIM, and DMARC status. All three must show as verified for reliable delivery.

    Add the SPF, DKIM, and DMARC DNS records provided by Sender to your domain's DNS settings. After propagation, click Recheck DNS records to update the status. Each indicator turns green when the corresponding record is detected and validated.

    Step 3 — Set sender identity in your API request or SMTP configuration

    When sending via the API, set the from object in your request body to https://api.sender.net/v2/message/send. Include the email and name fields inside the from object:

    json

    ``"from": {

        "email": "[email protected]",

        "name": "Your Company"

    }

    The email value must use a verified domain from the Domains page. The name value appears as the sender display name in the recipient's inbox.

    When sending via SMTP, configure your application's "From" address and display name to use a verified domain. Connect to smtp.sender.net on port 587 (or 25 / 2525) with PLAIN or LOGIN authentication over TLS, using the credentials from your SMTP user.

    Step 4 — Set sender identity in a transactional email template

    Go to Transactional emails → Templates and click the dropdown arrow next to a template, then select Edit. On the Settings step, locate the From name and Sender's email address fields.

    Enter your desired display name in the From name field (e.g., Your Company). Enter a verified email address in the Sender's email address field (e.g., [email protected]). The address must belong to a domain that has passed ownership and authentication verification on the Domains page. Click Save and continue to apply.

    How to Verify It Works

    Send a test email using the Send test email section on the template's API step, or trigger a test request to https://api.sender.net/v2/message/send using your API token. After sending, go to Transactional emails → Logs to confirm the email appears in the Latest events log with the correct recipient and subject. A delivered event confirms your sender identity and domain are configured correctly.

    Common Issues

    Email rejected or bounced due to unverified domain → The from email address uses a domain that has not been added or verified on the Domains page. Go to Account settings → Domains, add the domain, complete ownership verification, and ensure all three authentication indicators (SPF, DKIM, DMARC) are green.

    SPF, DKIM, or DMARC not passing after adding DNS records → DNS propagation can take up to 48 hours. Confirm the records are correctly entered at your registrar, then click Recheck DNS records on the Domains page. Verify that no conflicting records exist for the same domain.

    Sender name or address not matching expectations in recipient inbox → The from.name and from.email values in your API request override the template-level From name and Sender's email address settings. Ensure the values in your API call or SMTP configuration match what you intend recipients to see.

    FAQs

    Can I use different sender addresses for different transactional emails?

    Yes. Set the from.email field in each API request to a different verified address, or configure distinct Sender's email address values in each transactional email template's Settings step. All addresses must belong to verified domains.

    Do I need to verify my domain separately for API and SMTP sending?

    No. Domain verification on the Domains page applies to both sending methods. Once your domain is verified and authenticated, you can use it with either the API or SMTP.

    Where do I create an SMTP user for transactional sending?

    Go to Transactional emails → Setup instructions and select the SMTP tab. Click Add SMTP user to generate credentials. Use these credentials along with server smtp.sender.net and port 587 in your application's SMTP configuration.

    What happens if I send from an address on an unverified domain?

    The API will reject the request, or the email will fail to deliver. Always confirm that the domain portion of your from.email address appears as verified with a green checkmark under Ownership confirmed on the Domains page.

  • Email Layout Structure

    This guide explains how to build and configure the structural layout of your emails using sections, columns, and spacing controls in Sender's drag-and-drop editor.

    Where to Find This Setting

    The layout structure of an email is controlled through sections — the horizontal containers that hold your columns and content blocks. To access section-level settings, click the label that appears on the upper-left edge of any section on the canvas (e.g., Section: Headline & Image). This opens Section settings in the right panel.

    To browse available column layouts and pre-built section templates, use the left sidebar. Click the Section templates icon (top icon in the sidebar) to open the Section templates panel. You will see categories such as Preheader, Header, Hero, Content, Newsletter, Feature, Call to action, Product, Footer, and Blank. The Blank category contains raw column layout options you can add to your email.

    Steps to Build an Email Layout

    Step 1 — Add a Section with a Column Layout

    Click the + button that appears between existing sections on the canvas, or open the Section templates panel from the left sidebar. Under the Blank category, choose a column layout such as 100, 50/50, 33/33/33, 25/25/25/25, 50/25/25, 25/25/50, 67/33, or 33/67.

    The selected layout is added to the canvas as a new section with empty columns displaying DROP BLOCKS HERE placeholders. Click the + icon inside any column to add a content block.

    Step 2 — Configure Section Background and Spacing

    Click the section label on the canvas to select the section and open Section settings in the right panel. Set the Content background color to control the inner content area color, and the Section background color for the outer area behind the content. To add a background image, click Change next to Background image.

    Under SPACING, adjust the Top, Bottom, Left, and Right values to control the padding around the section's content. Use Column spacing to set the gap between columns within the section.

    Step 3 — Adjust Mobile Spacing and Visibility

    Scroll down in Section settings to find MOBILE SPACING. Set separate Top, Bottom, Left, Right, and Column spacing values that apply only on smaller screens.

    Below that, use Visibility on desktop and Visibility on mobile toggles to Show or Hide the entire section on each device type. This lets you create sections that appear only on mobile or only on desktop.

    Step 4 — Configure Individual Column Settings

    Click any block inside a column to select it, then expand Column settings at the bottom of the right panel. Set the Background color for that specific column. Choose a Vertical alignment option — Bottom, Middle, or Top — to control how blocks align vertically within the column.

    Toggle Visibility on mobile to Show or Hide to control whether a specific column appears on mobile devices.

    Step 5 — Reorder, Save, and Reuse Sections

    Hover over a section to reveal the section toolbar at the top of the section. Use the up arrow and down arrow icons to move the section up or down in the email. Click the save icon (bookmark) to save the section to My saved sections in the Section templates panel.

    To reuse a saved section, open Section templates, click My saved sections, and drag the saved section onto the canvas. Use the duplicate icon to create a copy of the section, or the delete icon to remove it.

    Layout Tips

    Use Blank sections for custom layouts — Start with a Blank column layout from the Section templates panel when you need precise control over column proportions rather than using a pre-built template.

    Set mobile spacing independently — The MOBILE SPACING values in Section settings override desktop spacing on smaller screens. Reduce Left and Right padding on mobile to maximize content width.

    Control column gaps with Column spacing — Increase or decrease the Column spacing value in Section settings to tighten or loosen the horizontal gap between columns. Set mobile Column spacing to 0 to remove gaps when columns stack vertically.

    Use section visibility to tailor device experiences — Toggle Visibility on desktop or Visibility on mobile to Hide to create device-specific sections. This lets you show a simplified layout on mobile and a multi-column layout on desktop.

    Preview both views before sending — Click the Preview icon (eye icon) in the top toolbar to see desktop and mobile versions side by side. Use the Dark mode preview toggle to check how your layout renders in dark mode.

    Common Issues

    Columns appear stacked instead of side by side → This happens when the email is viewed on a mobile device. Columns automatically stack vertically on smaller screens. To hide a column on mobile, select a block inside it, expand Column settings, and set Visibility on mobile to Hide.

    Section background color not visible → The Content background color covers the inner content area and may overlap the Section background color. Set Content background color to transparent (clear the hex value) if you want the section background to show through.

    Spacing looks different on mobile → Desktop SPACING values do not automatically apply to mobile. Open Section settings and configure the MOBILE SPACING values separately to control padding on smaller screens.

    FAQs

    How do I change the number of columns in a section?

    You cannot change the column count of an existing section. Instead, add a new section with the desired column layout from the Blank category in the Section templates panel, move your content blocks into it, and delete the original section.

    Can I have different column layouts in different sections?

    Yes. Each section has its own column layout. You can have a single-column 100 section for a hero image and a 33/33/33 section for product cards within the same email.

    How do columns behave on mobile?

    By default, columns stack vertically on mobile screens. You can control this by adjusting MOBILE SPACING and Column spacing values for mobile in Section settings, or hide specific columns using the Visibility on mobile toggle in Column settings.

    Can I save a section layout to reuse later?

    Yes. Select the section on the canvas to reveal the section toolbar, then click the save icon (bookmark). The section will appear under My saved sections in the Section templates panel, ready to drag into any future email.

    What is the difference between Content background color and Section background color?

    Content background color applies to the inner content area where blocks and columns are placed. Section background color applies to the full-width area behind the content, visible on both sides when the email content area is narrower than the viewport.

  • How to Set Up Webhooks for Transactional Email Events

    Webhooks let you receive real-time HTTP POST notifications at your own endpoint whenever specific events occur in your Sender account. You can use webhooks to track bounces, monitor new subscriber activity, and integrate delivery data with your own systems — without polling the API.

    This article walks you through adding a webhook, selecting a topic, securing your endpoint with the signing secret, and monitoring webhook performance.

    Before You Begin

    Confirm the following before setting up a webhook:

    • You have an active endpoint URL that accepts HTTP POST requests (e.g., https://yourdomain.com/webhooks).
    • Your endpoint returns a 2xx status code on successful receipt. Non-2xx responses are logged as failures.
    • You have access to Account settings in your Sender dashboard.

    Step 1: Open the Webhooks Page

    Go to Account settings → Webhooks in the left sidebar. This opens the Webhooks page, which displays a table of all configured webhooks with four columns: Topic, Total deliveries, Total failures, and Response time. If no webhooks exist yet, the table will be empty.

    Step 2: Add a New Webhook

    Click the Add webhook button in the top-right corner. A modal dialog appears with two fields:

    URL — Enter the full endpoint URL where Sender should send POST requests (e.g., https://yourdomain.com/webhooks).

    Topic — Open the Select topic dropdown and choose the event you want to subscribe to.

    The available topics are:

    Topic

    Description

    subscribers/new

    A new subscriber is added to your account

    subscribers/updated

    An existing subscriber's data is modified

    subscribers/unsubscribed

    A subscriber opts out

    groups/new

    A new group is created

    groups/new-subscriber

    A subscriber is added to a group

    groups/unsubscribed

    A subscriber is removed from a group

    campaigns/new

    A new campaign is created

    bounces/new

    A bounce event is recorded

    For transactional email monitoring, the bounces/new topic is particularly useful — it notifies your endpoint whenever a sent email bounces, letting you flag delivery issues in real time.

    After filling in both fields, click Add to save the webhook.

    Step 3: Verify Webhook Delivery

    Once the webhook is created, it appears as a row in the table on the Webhooks page. Monitor the Total deliveries and Total failures columns to confirm your endpoint is receiving and acknowledging payloads correctly. The Response time column shows how quickly your server responded to the most recent delivery.

    If Total failures is incrementing, your endpoint may be returning a non-2xx status code or is unreachable. See Step 5 below to investigate.

    Step 4: Secure Your Webhook With the Signing Secret

    Below the webhook table, the Signing secret section displays a masked secret value. Use this secret to verify that incoming POST requests genuinely originate from Sender.

    Click the eye icon next to the secret field to reveal the full value. Click the copy icon to copy the secret to your clipboard. Use this secret on your server to validate the signature included in each webhook request header.

    If you suspect the secret has been compromised, click Rotate secret to generate a new one. After rotating, update the secret in your application immediately — requests signed with the old secret will no longer validate.

    Step 5: View Error Logs for a Webhook

    To diagnose failed deliveries, click the dropdown arrow (chevron) to the right of the Pause button on the webhook row, then select View error logs. This opens the Webhook logs page, which displays a table with two columns:

    Date / time — The timestamp of the failed delivery attempt.

    Error code — The HTTP status code returned by your endpoint (e.g., 405, 500).

    Click the expand arrow on any log entry to reveal the full response body returned by your server. This is helpful for identifying misconfigured endpoints, incorrect HTTP methods, or server-side errors.

    Managing Existing Webhooks

    Pause a Webhook — Click the Pause button on any webhook row to temporarily stop deliveries without deleting the configuration. This is useful when performing maintenance on your endpoint.

    Edit a Webhook — Click the dropdown arrow next to the Pause button and select Edit. The Edit webhook modal lets you update the URL or change the Topic. Click Add to save your changes.

    Delete a Webhook — From the same dropdown menu, select Delete to permanently remove the webhook. This action cannot be undone.

    Tips for Reliable Webhook Integration

    Respond quickly — Your endpoint should return a 2xx status code within a few seconds. Long-running processing should be handled asynchronously after acknowledging receipt.

    Use the signing secret — Always validate the request signature on your server to ensure payloads are authentic.

    Monitor the Webhooks table — Check Total failures and Response time regularly to catch delivery issues early.

    Combine with Logs — Cross-reference webhook data with the Logs page under Transactional emails → Logs to match bounce notifications with specific recipient email addresses and event details.

    Combine with Metrics — Use the Metrics page under Transactional emails → Metrics and filter by Event type (Bounces, Spam reports) to see aggregate trends alongside your webhook-driven alerts.