Events and Behaviour Tracking
- How to Create a Synchronized Module
- How to Create a Gmail Promotions Annotation for Emails
- All for adaptivity in email builder
- Editing HTML and CSS
- How to Add Anchor Links to an Email
- Adaptive email builder review
- How to Add a Rollover Effect to an Email
- Product Blocks Generator
- Adding a Video to an Email
- Working with “Images” block
- How to Add Social Media Buttons to an Email
- How to Add a Table to an Email
- How to Add a Background to an Email
- How to Add a Custom Font
- Designing your email
- Scheduled Mobile Push Message
- How to Create Deep Links and Universal Links
- Connecting Mobile Apps with Yespo
- Mobile Push Campaign Report
- How to Create a Google Project for Mobile Push Notifications
- How to Create a Mobile App Push Notification
- Setting Up Delivery and Clicks Analytics
- Managing mobile SDK access keys
- SDK for Mobile Apps
- Service Worker. Troubleshooting
- How to Send Web Push Notifications from a Website
- How to Create a Web Push Notification
- How to Set Up Web Pushes for Safari
- How to Create a Google Project to Collect Tokens for Web Push Notifications
- Sending user a personalized Push notification depending on his activity on the website
- How to Set Up Subscription Form for Your Website
- How to Set Up a Pop Up for Your Website
- Integrating widgets with GA
- How to Set up Informers for Your Site
- Creating Pop-ups via Google Tag Manager or WordPress
- How to Set Up Floating Box Widget for Your Website
- Creating a Widget Launcher
- How to Set Up Age Gate Widget for Your Website
- How to Set Up Double Opt-In
- How to Set Up an Automated Birthday Campaign
- Launching a Workflow After a Contact Import
- How to Create a Welcome Email Series
- How to Set Up Notifications for Trigger Control
- How to add scenario to the button
- Workflow Troubleshooting
- How to Automate Customer Reactivation
- How to Launch a Regular Workflow for a Segment
How to Create an AMP Carousel
You can create an AMP-powered carousel in the email template editor with the help of in-built blocks or third-party services.
Important! To start sending campaigns with AMP-powered carousels, you must register with Google as a dynamic email sender.
How to Create an AMP-Powered HTML Carousel
- Go to Messages and choose any template you want to edit. Go to Blocks > AMP-Carousel.
- Drag an AMP-carousel block to the HTML block you’re editing.
This block is “⚡HTML” tagged by default, as an AMP element is displayed only in email clients that support the AMP technology (Gmail, Mail.ru as for now). In other email clients, this block will be hidden: below there is provided an alternative option for such emails.
- Double-click on the block to start editing.
- To add a slide, you can download the images from your computer, use the prepared images or bank images, or insert an external link to an image. One image shouldn’t be more than 2MB. The number of slides is unlimited.
- Set the preview width, if needed, and add alternate text.
- Enable Display preview and click on Message view to see how your carousel will be displayed in an email on different devices.
Important! Use images of the same height for smooth slide switching.
If the uploaded images are of different sizes, you can edit them in a built-in image editor. On the left of the slide image, click on Edit image > Crop, and set the necessary parameters.
How to Create an HTML Block for Email Clients that Don’t Support AMP
AMP-supported blocks will be displayed only for Gmail users. To make it visible in other email clients (Apple and Yahoo! Mail as for now), create a dynamic carousel using FreshInbox.
- Go to Freshinbox and add necessary images by inserting their URL. The carousel should contain not less than three images.
- If needed, add extra images by clicking on More images.
- Edit the image parameters. For carousel blocks, responsiveness is set by default.
- Test the carousel by sending it to your email address.
Now you need to transfer the carousel block.
- Drag an HTML block to the previously created email with the AMP-powered carousel, and click on it to open the code editor tab.
- Copy HTML from Freshinbox.
- Paste the copied code in the code editor.
- Copy CSS from Freshinbox.
- Paste the copied CSS at the end of the code in the corresponding tab.
- Click on the Code editor icon to close the editor.
- Click on the added carousel, go to Include in and click on HTML.
- Click on Message view to see how both blocks look on different devices.
- When you enable Include in HTML, the selected element will be displayed in all email clients that support only classic HTML-mime protocol.
- When you enable Include in AMPHTML (⚡HTML), the selected element will be displayed in all email clients that support AMPHTML-mime protocol (text-x-amphtml).
- If you enable Include in both (set by default), the selected element will be displayed in all email clients.
- If the email client doesn't support the format of the selected element, the recipient will only see the first image.
A few more tips:
- Instead of an interactive HTML carousel, you can add a regular product card and enable Include in HTML. It will be displayed only in those clients that don’t support the AMP technology.
- You can edit carousel images in the built-in image editor:
- add text;
- edit size;
- add a button, etc.
- To check the AMP email for errors, click View message.
Hover over the errors to see the description. You can fix them straight in the builder, or copy the code for validation in Google Playground.