See how powerful the email tools built into RSVPMaker can be for outreach to customers of your company or members of your organization and driving them to your website so they can sign up for events and learn more about what you offer.
I’ve posted more details in the blog knowledge base article linked to below and will answer questions in an upcoming demo session on Zoom.
The RSVP Email tool within RSVPMaker lets you create messages in the WordPress editor, as if they were blog posts, send them out with the post title as the email subject line.
Example email newsletter
Rather than starting with a blank message, you can start by importing a blog post, an excerpt from a blog post, the invitation to an event, or a combination of the above. Part of the point of using the standard WordPress editor to create and format your email is to make it easier to incorporate existing content.
More details in the knowledge base article linked to below.
The latest version of RSVPMaker changes the RSVP Now! button to one with a red background and white text — while also allowing you to customize the button in the WordPress editor. Previous versions used a red-white-and-blue button (a holdover from a political campaign) and had to be edited as HTML code.
In RSVPMaker Settings under RSVP Button, you will now see a link that lets you edit the button template as a separate document. You can change the text on the button to, for example, say Register Now, and you can also change the colors (see below).
The link attached to the button is a placeholder code (%s) and should not be changed. This document is not intended to include anything other than the button content. Once you update this special post, your revised button will be used with every event that has RSVPs turned on.
Here is how you can create your own simplified WordPress block editor for specialized applications using React and the REST API.
I am, in general, a fan of the WordPress block editor and how it has progressed. However, I’ve learned over time that all the options available within the block editor can be overwhelming to newbies.
This has proven to be particularly true to the community of Toastmasters whom I’ve introduced to WordPress through the Toastmost.org website hosting service. Sometimes, asking them to dive into the block editor is inappropriate and/or overkill for relatively simple tasks they want to perform. That’s prompted me to create a couple of simplified block editors, including one for editing RSVP forms for events that’s included with the latest update to RSVPMaker.
To be clear, I’m not trying to reproduce all the work of the good folks running the Gutenberg block editor project. My editors don’t come close to the sophistication of the block editor, but they offer a simpler user experience for accomplishing specific tasks. That is, working with RSVP forms and Toastmasters agendas. These documents can contain other sorts of blocks — paragraphs, headings, and images — but the advantage of my specialized editors is that they are focused. Rather than having to hunt through the block inserter to find my specialized blocks — amidst all the blocks geared toward blog posts and web pages — I can present just the blocks relevant to my application.
For example, my equivalent of the inserter for this RSVP form editor just offers form fields:
Custom block inserter
For each block, there are also options to move blocks up or down within the document, change attributes, or delete the block.
Options for form fields
The effect winds up being effectively the same as working with those same blocks in the WordPress block editor, where the field options are shown in the sidebar. Although my custom-built editor doesn’t allow you to add other blocks, it can move them up or down within the document without corrupting that content.
Same form in the standard block editor
The secret to making this work is turning the WordPress document you want to work with into an array of JSON objects you can manipulate in your client-side application. You then send the altered version back to the server as JSON and have your server-side API turn that data back into block format that can be saved as the updated body of the post in question. Naturally, this requires some attention to detail to make sure the technique can’t be used to rewrite your home page into some hacker’s manifesto. But the tools for doing it securely are available within the WordPress platform.
Turning the content of any WordPress document into JSON turns out to be easy, with the use of a function called parse_blocks, shown here in an excerpt from my REST API code.
This results in the data being downloaded in this format:
Downloading the data as JSON
On the client side, I’ve got a React app — my first real foray into using React outside of creating WordPress editor blocks — that I use to add, delete, and rearrange items in the block array, preserving the structure of blockName, attrs (attributes) object, innerHTML (string) and arrays for innerBlocks and innerContent.
The altered array of block objects can then be posted back to the server, as shown below. In this example, I’m moving the Email field above First Name and Last Name.
Posting a new array of blocks
On the server side, I catch this input, transform it back into blocks format, and use it to update the post.
The function doing the work of formatting the content into block data — the comments-plus-JSON format that goes into the body of the post — is shown below. I suspect that there is a similar function in WordPress core that I could be using instead, except that I haven’t found it yet. Meanwhile, this seems to work perfectly well for every block I’ve tried it on so far, including those with nested innerBlocks content.
I’m omitting some details for the sake of making these examples clearer, such as the code for creating a new post rather than updating an existing one, but you can find my API code here and the JavaScript and script enqueuing functions here.
For client-server communication, I’m using the combination of React Query and Axios. React Query is supposed to simplify a few things, although I stumbled over many details such as getting optimistic updates to work and not using the async / await keywords correctly on my API get and post functions. I found this tutorial helpful in figuring out that part.
The editor of Florida Bulldog came to me a few months ago asking for ideas on how to stretch the budget of his nonprofit news website. He particularly asked if we could find a more economical alternative to Mailchimp, for which the subscription fee was rising with the size of his list. Florida Bulldog is an investigative news site, and whenever it publishes a new hard-hitting report, email is an important element of getting those stories read.
His query prompted me to take a closer look at Postmark, a reliable and cost effective service for email distribution. RSVPMaker makes it possible to compose email messages using the same WordPress editor you use to write and edit blog posts and other web content. Postmark integration allows you to distribute those messages to thousands of people, with Postmark handling the complexities of bounced emails and spam complaints. Like Mailchimp and similar services, Postmark can track how many people opened your messages and clicked on links.
“For me, this is a heck of a lot easier than dealing with Mailchimp!”
Dan Christensen, Editor and Founder, Florida Bulldog
Previously announced as a beta test of a premium plugin, the code for enabling Postmark integration is now part of the free core RSVPMaker plugin.
Starting at $10 per month for 10,000 email sends, Postmark is a reliable and efficient email distribution service that supports both broadcast messages (newsletters, event invitations, and announcements) as well as transactional messages (registration notifications and confirmations). In combination with RSVPMaker’s tools for composing email messages in the WordPress editor, it provides a convenient and cost-effective alternative to services like Mailchimp and MailPoet.
Previewing an email composed in the WordPress editor with an embedded YouTube video
“For me, this is a heck of a lot easier than dealing with Mailchimp!”
Dan Christensen, Editor and Founder, Florida Bulldog (see case study)
Although I would like to profit from the work I’ve invested in making RSVPMaker and Postmark work together, I’ve decided to hold back only a few premium features (and access to my services as a consultant).
If you’re in the business of hosting small business websites on WordPress multisite, talk with me about how you can provide your clients with access to email marketing services as an upgrade to their subscription. That’s something I’m doing myself for users of Toastmost, a website hosting service for Toastmasters clubs and districts. Also not included in the base plugin are features for managing email forwarders and discussion lists from within the WordPress dashboard, also created as part of the Toastmost solution.
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.
https://youtu.be/wUIfenYiAb4
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.
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.
Update: The essential code for enabling Postmark is now part of the free core RSVPMaker plugin. The part I’m holding back to be offered as a premium plugin, or as part of consulting services, is related to (a) managing forwarders and email discussion lists from the WordPress dashboard and (b) a bundle of features for monetizing the service on a subscription basis if you host websites on a WordPress multisite install. Contact me at david@rsvpmaker.com for more information.
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.
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.
An email with RSVPMaker content and a calendar background image.
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 been overhauled, making it more useful for composing event invitations and email newsletters
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:
Adding accent colors to a heading
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:
https://youtu.be/px9qMpKXyho
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.
Limitations
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.
Background image on an email
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.
A dynamically created template for a custom post type
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.
