Here’s a video demo of how you can incorporate YouTube videos and lists of blog posts into your event promotion / event replay emails as well as other types of email newsletters using the RSVP Mailer component of RSVPMaker for WordPress.
Key components of this solution include, a way of importing the content of entire posts into the email template.
I applied that technique to this content, creating the blog post first and then using it as the basis for an email to my list.
An alternative is to use the RSVP Email Embed Post or Posts content block to display excerpts of a chosen post or a listing of recent posts from all categories or a single category. Other recent posts blocks or shortcodes may work in the email template, but I recommend testing them first. This one is tested to work with the RSVP Mailer methods of formatting email.
Although not shown in the video, you can of course also include RSVPMaker blocks for displaying event listings …
… or promos for the next few events / events in a category.
To style the background of the email template, select the email body block that wraps around the other content.
For a long time, I’ve been looking for a better email newsletter and event invitation solution for website managers than either Mailchimp or MailPoet. By piggybacking on the Postmark service for high-volume email, I’ve finally created a solution I’m happy with, and I’d like you to help test it.
Fill out the form below if you would like to be part of a beta test for RSVPMaker integration with the Postmark service, which starts at $10 for 10,000 email sends per month. That would likely represent a cost savings for most of you, although it depends on the size of your list and how often you send to it. Even if you won’t save money, you will send time by managing your website and your email list within the same dashboard, creating content with the same editor.
Register for the Beta Program
I plan to offer Postmark integration as a paid add-on to RSVPMaker, at a reasonable price, still TBD. As a beta tester, you can get it for free.
Beyond newsletters and other broadcasts, Postmark helps you deliver transactional messages such as RSVP confirmations and password resets more reliably. What it doesn’t offer is a slick authoring environment — which is the gap I fill with RSVPMaker.
The RSVP Mailer utility included with RSVPMaker has been in the software for a long time but has become more powerful with the addition of block-based email templates.
With the RSVPMaker Mailer, you compose newsletters and event invitations in the block editor, then preview and send them in a special front end template that includes the controls for sending messages.
The RSVP Mailer email templating system for the WordPress editor now provides powerful styling options, and I’d love to see what those of you who have stronger design skills than I do can do with it. Send me a sample, and I’ll feature it here as part of a design showcase.
On a technical level, one improvement I’ve added recently is the ability to set a background image for the “wrapper block” that defines the background of an email message. Here’s an example of a message that uses a variation on the stylized calendar image I use on the header of my website.
And another as an example of a fictional nature lover organization’s newsletter.
I’m not suggesting that everyone should use this special effect, only that it’s one of the tools RSVPMaker makes available to you within the WordPress editor when you compose your messages. One of the virtues of creating email content this way is you can apply most of the same techniques you would to authoring and styling a blog post or web page.
Here’s that nature walk email as it appears in the editor.
The RSVP Mailer tool included in RSVPMaker has undergone a significant overhaul, making it more useful for composing event invitations and email newsletters, which you can send either through your web server or through the integration with MailChimp.
The styling on this blog post is approximately what you would see in an email version of this same content.
Better integration with formatting in the WordPress block editor
For example, the text above is an H2 WordPress heading with the text color and background set in the editor, like this:
I can add simple layouts like a two-column presentation of information:
When to Use the Built-in Mailer
Sending to at most a few hundred people, such as everyone who registered for an event or all the users of your website. You can send different messages to just those who have or have not registered for an event.
When to use Mailchimp
Sending to hundreds or thousands of people through a high-capacity service with sophisticated handling of unsubscribes, spam filters, and bounced email.
You can still compose your messages in WordPress.
I can also include a YouTube video like this demo:
Among the advantages of composing messages in WordPress is that it’s easier to leverage WordPress content such as embedded posts or lists of posts, not to mention event invitations. MailPoet has some of the same advantages, but it uses its own WYSWIG editor rather than allowing you to use standard editor blocks. Also, I’ve had trouble using MailPoet on WordPress multisite installs.
RSVPMaker has had some version of these email capabilities for years, but significant improvements introduced this month include:
Templates based on nested blocks, with an outer block you can style to set a background color for the body of your message and an inner block (with its own color options) that contains the body of your message. You can modify the template as I’ve done here to include the RSVPMaker banner up top or to change the default color scheme.
Integration with your theme colors, particularly for newer themes that incorporate a theme.json file.
Ability to add your own custom stylings. The inline styles system works by replacing an HTML class attribute with a set of CSS rules. Taking advantage of the Additional CSS class(es) option included with every WordPress block, you can specify inline CSS to be substituted when the content is sent by email. Or tweak the display of blocks added by other plugins.
A Guest Email List Signup block you can use to sign people up for your list, in addition to the Add Me to Your Email List checkbox that can be included on RSVP forms. You can also add members to the email list manually or import a list downloaded from a service such as MailChimp.
When sending to a list maintained on the web server, you can filter by RSVP status for an event. This is useful for membership organizations that want to be able to send a friendly reminder to members who have not yet registered and a different thank you / follow up message to those who have registered.
YouTube videos embedded in an email are now represented with a bigger email preview image with a play button overlay.
Speaking of video, watch for a follow up email with a video demo as I work to document these features better. Meanwhile, I hope some of you will explore on your own and provide feedback.
These formatting capabilities are based on inline CSS styles and don’t handle all the techniques you can use on a website. For example, the grid and row blocks aren’t supported. To approximate a columns effect, I can support two columns that each make up a little than half the width of the content area. At that size, a two-column layout is still readable when email is read on a phone rather than a PC. The responsive design techniques that allow regular WordPress columns to reformat to work on a phone screen aren’t available in an email context.
I haven’t figured out how to make that limitation apparent in the editor, so you can actually add three or four column layouts when creating content. They will just show up as stacked two column layouts when you view them in the email template.
You can add custom CSS associated with block classes. And because an Additional CSS class(es) option is available in the editor sidebar for any block, you can target custom formatting code at specific paragraphs or sections of your message.
Here’s one of my experiments with using a background image (the header image from the website) as the background image on an email instead of the regular colored background.
Unfortunately, those customizations at the CSS level will not be reflected in what you see in the editor. However, you will be able to preview them in the email template on your website before sending a message.
The email authoring and editing process is not quite what-you-see-is-what-you-get, as the WordPress editor follows the styles set by your theme, and for example the font size displayed in the editor and the font displayed in email format may be different. The previously documented methods of adding editor stylesheets seem not to work with Gutenberg.
However, the preview you see before sending a message should be very close because it’s a special template that also uses only inline CSS formatting, just like the version sent by email.
When you activate a full-site editing block theme (or activate RSVPMaker on a site that uses one of those themes), the plugin will now create a template for the rsvpmaker post_type based on that theme’s single post template. The major tweaks are to remove the blocks that display the post date (which can be confusing when emphasized more prominently than the event date) and post author.
You can then make further changes to the template, using the Full Site Editing feature, according to however you would like event posts to be displayed.
How it Works
With a full-site editing theme, WordPress checks for the existence of a database entry corresponding to a customized version of the template for the index, archive, page, or post to be displayed. If none is found, it defaults to loading the HTML file distributed with the theme. For example, if there is no ‘single’ template in the database for a single blog post, it will load ‘single.html’ from the template directory in the theme folder.
For an RSVPMaker event post, it will check for ‘single-rsvpmaker’ in the database or ‘single-rsvpmaker.html’ in the theme.
This means I can create a template specific to RSVPMaker posts as a database entry even though the theme doesn’t include a single-rsvpmaker.html. For most themes, the template used for single blog posts is probably close to how an event should be displayed, but maybe not exactly. A lot of themes will display the date a post was published prominently, when the date of the event is what you would really like to emphasize. So my altered version for events removes the standard date block.
This automated alteration of the single template works well on Twenty Twenty-Two, where the date and author blocks are normally placed at the bottom of each post, right before the blocks for category and taxonomy tag display.
With other themes, you might wind up with an obvious blank spot on the page where the post date was supposed to go. But thanks to the magic of Full Site Editing, you should be able to fix problems like that fairly easily. In other words, if there’s a wrapper block that normally contains the date block, you can remove that whole section.
Details for Developers
Here is how I dynamically create a template for a custom post type.
The code below is a simplified excerpt of what I’m using in the plugin. I use get_block_templates() to retrieve an array of template objects, including both those recorded in the database and those distributed with a theme. Assuming it finds a ‘single’ template, it filters out the date and author blocks and creates a new entry in the posts table with post_type set to ‘wp_template’ and ‘single-rsvpmaker’ in the post name field. The slug for the theme is added to the taxonomy for that post.
If you switch between full site editing themes, you may wind up with several versions of this in the post table but only the one for the current theme will be displayed in the editor.
When you create a new event, by default it’s assumed to be in whatever timezone you have set as the default for your website. However, you can change the timezone to a different one (specified by city). In the example below, the site defaults to U.S. Eastern time, but I can change that by specifying Los Angeles time.
The checkboxes on that new event screen specify that the timezone should be displayed and that the option to convert to the user’s local timezone should be offered. That causes the Show in My Timezone button to be displayed, as shown below. Click on the button to see the translated time (based on the local timezone reported by your computer).
RSVPMaker now allows you to include upcoming event listings in email newsletters distributed using MailPoet, the plugin and email sending service recently purchased by Automattic, the company behind WordPress. You can also have people who register for your events sign up for your email list at the same time by including the Mailing Lists Checkbox block in your RSVP form.
Update: MailPoet can also improve the delivery of RSVP confirmation messages and other transactional messages (see below).
For the benefit of interested developers, I’ve included some technical details about the integration at the end of this post.
Test it from the subscriber’s point of view by signing up at RSVPMaker’s MailPoet List Demo page. (The official RSVPMaker list remains a MailChimp list, at least for now).
MailPoet is free for lists of up to 1,000 providers and a less expensive than MailChimp for large lists. Although RSVPMaker includes is own email utilities, including the ability to construct newsletters for distribution through MailChimp, I wouldn’t claim it rivals the design tools MailPoet provides.
To add RSVPMaker event listings in a newsletter, add one of the RSVPMaker shortcodes to a text block, using the custom:prefix. In other words, rsvpmaker_upcoming becomes [custom:rsvpmaker_upcoming]. (Although I’ve put more emphasis on Gutenberg blocks lately, most have shortcode equivalents).
The default RSVP event registration form that comes with RSVPMaker was designed for in-person events, with space for registrants to provide a phone number and add the names of guests. When you are instead registering people for online events (the most common case in 2020), collecting a phone number may not be appropriate, and guest registration is probably irrelevant.
The latest RSVPMaker release makes it easier to switch between alternate RSVP Forms. I’ve provided one for webinars, which you can modify as needed, and you can create more.
When working with an event or event template, you can either switch to using one of the alternate forms (shared between all events that use it) or create a copy that you can customize.
This is similar to how you can either edit the default RSVP Form or create a customized copy of it.
There’s now an option to choose either the default form or one of the alternatives when you create a new event or event template.
You can edit the available forms, or create new ones, on the RSVP Forms tab of the RSVPMaker Settings screen.
You can modify the webinar form I’ve provided, which by default asks for first name, last name, and email, with a prompt to allow you to add the registrant to your email list (which can be automatic if you’re using RSVPMaker’s MailChimp integration).
Or you can create a new reusable form from scratch.
At the bottom of the RSVP Forms tab, you’ll see a listing of custom forms previously created for specific events. To make any of these forms reusable, you assign it a name that should be displayed on the menu.
RSVPMaker users can also manage forms by associating them with an event template for a given type of event, which can also include customized confirmation messages and settings shared across events based on that template. However, allowing RSVP Forms to be managed independently should help with scenarios where you want to collect a similar set of data for multiple types of events.
RSVPMaker now offers a countdown timer block. You can embed it in an event, and it will show the countdown to the start time for that event. Or add it to a post or page (for example, a blog post highlighting how quickly the event is approaching) and specify which event you’re targeting.
You can see an example of how it works when embedded in an event below.
Styling the Countdown Timer
RSVPMaker provides some basic styling for the countdown timer, which you can modify to fit your preferences using, for example, the WordPress Customize tool. Here’s an example.
CSS classes you can target include:
countdowndigits: the digits included in the display
countdowndigits-line: the whole line of content
countdowndays, countdownhours, countdownminutes, countdownseconds: the components of the time
countdownspacer: wraps around the colon between hour, minutes, and seconds
countdowndayslabel: the label “days” that appears between the days and hours
You can also specify what should be displayed after the countdown has expired (the scheduled start time of the event is past). The choices are a “stopped clock” like 00:00:00, the stopped clock plus a message, or just the message you provide. If you don’t want anything displayed, select “none.”
If a message is displayed, it will be a paragraph with the class “countdown_expiration_message” as a target for any CSS.
This is a demo of how to do event marketing in RSVPMaker for WordPress, showing an updated user interface for setting event dates and times.
The drop-down lists for year, month, day, and time are gone, replaced with simple text entry blanks. You can type in “January 1, 2021 7 PM” or “6 March 2021 8:30 am” or any other clear date and time. If you prefer, use the numeric format “2021-02-28 09:30:00.” That’s what actually gets recorded to the database.
If you enter the date as text, you will see the numeric equivalent and vice versa.
This change is based on usability research I’ve been reading that argues against excessive use of drop-downs. I personally found it to be inefficient when creating multiple events.
A simpler user interface lets you focus on event marketing, like copy and images that tell people why they should attend.
I’ve added the ability to change dates and times using the Quick Edit feature of WordPress post listings.
In addition, a new multi-event setup screen is handy for things like creating RSVPMaker event posts representing all the sessions and activities in a conference program.
The demo covers the use of the RSVPMaker Schedule block, which was intended for applications like conference schedules. Used in combination with the Show in my timezone button, it allows people to convert times to their own local timezone — particularly handy for online events. See the sample conference schedule example from the demo.