RSVPMaker Blocks for the New WordPress Editor (Gutenberg)

Like other WordPress plugin developers, I’ve been monitoring the previews of Gutenberg, the new editing experience currently available as a plugin and coming soon to core as part of WordPress 5.0. This major new release could ship as early as August, and it’s potentially disruptive for plugins that rely on shortcodes, the placeholder codes for dynamic output.

Existing shortcodes should continue to work. However, one of the motivations of the new editor is to eliminate the need for a lot of shortcodes that were used by plugin and theme authors to achieve formatting effects. The need for them should go away now that WordPress has more powerful, JavaScript powered formatting controls built into the editor itself. Most of the shortcodes used in RSVPMaker are more dependent on server-side code and logic, but fortunately there’s a way of handling that under the new architecture, too.

Block insert animation
Adding an RSVPMaker Upcoming Events block.

In Gutenberg, a web document is treated as a series of “blocks,” each of which has can have its own formatting controls and properties. A typical blog post would be a series of paragraph blocks with maybe an image block inserted into the middle of the page. There are standard blocks for quotations, two column layouts, and tables, making it possible to do more things in the visual editor that might have required a plugin or some HTML coding in the past.

Blocks can also replace the functions previously performed by shortcodes, including functions that require server-side execution like retrieving an RSVPMaker event listing. Accordingly, RSVPMaker now makes two custom blocks available to WordPress installations that have the Gutenberg plugin active … and which ought to work with WordPress 5.0 when it arrives. These block controls replace the buttons I had created for the “old” WordPress editor for inserting event listings and single events.

To add a new block, you click the + sign in the editor. You can then browse through the available blocks or search by keyword, for example “rsvp” or “rsvpmaker” will bring up the RSVPMaker blocks. The two blocks available so far are “RSVPMaker Upcoming Events” and “RSVPMaker Embed Event.”

RSVPMaker Upcoming Events is what you would use on your main events page. You can also use it to list a given category of events by setting the Event Types field. Clicking the button in the block chooser inserts a placeholder widget with an embedded form you can use to specify whether you want the event listing displayed with or without the calendar grid and how many events per page should be displayed, etc.

RSVPMaker Embed Event lets you insert a single event in a blog post or landing page. For example, you might write a blog post promoting an upcoming event and embed the event registration page in that post, in addition to making it available on your website’s event calendar. Again, there are a number of options you can set, from embedding the entire event and registration form to just embedding the RSVP Now! button.

Getting this working was a challenge, but I think it’s a better experience. It’s also new enough that there may be bugs. I did run into issues with errors occurring on the administrative dashboard when WordPress with Gutenberg enabled seemed to want to execute functions that would only normally be triggered by filters that execute on the front end of the website. (Does Gutenberg execute the “the_content” filter for some reason?) If you run into other issues that I missed, let me know.

By default, plugins like RSVPMaker that employ custom post types will continue to use the “classic” WordPress editor declares its support for Gutenberg editor. So far, I see no reason why you can’t take advantage of the greater formatting controls in Gutenberg when composing the body of an event post. However, for now that’s a setting you can enable at the bottom of the RSVPMaker settings page.

Try it, and let me know what you think.

Control of Personal Data (GDPR Compliance)

RSVPMaker now allows individuals to download a copy of their personal data or request that it be erased, in keeping with the provisions of GDPR.

The European Union’s General Data Protection Regulation (GDPR) is part of a broader trend toward giving individuals more control over how their data is secured and managed. WordPress 4.9.6 includes utilities for exporting and erasing user data on demand.

rsvpmaker personal data
Sample personal data export, including RSVPMaker registration info.

RSVPMaker piggybacks on those features, so that in addition to user data or comments associated with an email address, a data export can include event registration data. All registration data associated with that email address can also be deleted on demand.

In both cases, data will be retrieved or deleted based on a search for the person’s email address and all associated records. The website will send an automated email asking the user to confirm that request.

You will find the Export Personal Data and Erase Personal Data screens under the Tools menu of the administrator’s dashboard.

Adding a Privacy Policy

If you are running an independent WordPress site, you will see prompts suggesting you add a privacy policy to your website as soon as you update to version 4.9.6 or later. WordPress will suggest some default wording. You may also wish to consult my version from rsvpmaker.com for wording specific to the RSVPMaker.

Adding a Privacy Policy Consent Checkbox

GDPR’s requirement for informed, active consent is commonly interpreted as requiring an additional checkbox (not pre-selected by default) with which the user agrees to your privacy policy. The RSVPMaker settings screen allows you to specify that the checkbox should be displayed on all forms, with a message you can customize.

privacy consent checkbox
Error message when consent checkbox is not checked.

Since RSPMaker’s registration function is meaningless without data collection, the submission form submissions will fail if the box is not checked.

You might think that it would be obvious that the purpose of this form is data collection, but the idea is people should know the specifics of how you will store, protect, and use the data they share.

Use of Email Addresses

RSVPMaker includes built-in features to support sending confirmation, reminder, and follow up messages to individuals who register for your events. Registration information is retained indefinitely, but an administrator can delete it in response to a request using the tools provided by WordPress. However, site owners should be cautious about adding email addresses collected this way to a permanent email list.

Under GDPR, other regulations, and generally accepted best practices, consent is required to add an email address to a marketing email list.

If you use the integration with MailChimp, it’s possible to include an “Add me to your email list” checkbox on the registration form and let MailChimp take care of the double opt-in process. An email address will not actually be added to the email list until the owner of that email address confirms. That is, they will be sent a notification and must click to confirm before they are added to your list. If you are not using that integration, you should obtain consent some other way.

RSVPMaker Reminders For Multiple Events Based On The Same Template

If you use the events template feature of RSVPMaker to create multiple events including the same boilerplate details that repeat every time, now you can also create automated reminder messages for each of those events more easily.

When you create a series of events based on a template, each event gets a copy of the basic content (where and when you meet, who to contact with questions) and most of the associated metadata (like whether RSVPs are being collected, whether there is a fee, what event type the post is associated with). However, the reminder message setup isn’t duplicated by default — and you might not necessarily want the reminder message to be the same each time. Just like you do not want to automatically overwrite the content of posts that might have been updated independently of the template.

On the other hand, you may want the reminder message to be the same (or basically the same) most of the time. Improving how this is handled is one of those features I needed for my own purposes. Since I run an Online Toastmasters club (Online Presenters) that meets every week, and every one of those meetings needs an automated reminder message to the people who signed up to attend as a guest. The reminder includes details like the online meeting link and basic instructions for how to sign in. Adding those reminders one meeting at a time was a drag.

Now, when you update a reminder message for any event associated with a template, you will see an option to apply that update to all the other events associated with that template. This is similar to the process for updating events based on a template, where you can click “Check all” but still make exceptions for special events that require a slightly different message.

Checking reminders to be updated.

Note that the subject line includes a series of date formatting codes, which default to the same ones used in your site’s “long date” format from the RSVPMaker settings page. You may want to tweak it, for example if you do not think it’s necessary for the year to be displayed.

The result looks like this

Success!

For basics on how the reminders function works, see this post.

 

Saved Locations Added to RSVPMaker WordPress Plugin

RSVPMaker users have periodically requested that I add a standard way of recording event locations. If you were organizing a series of events at a specific location, you could create an event template, but RSVPMaker didn’t have a way of managing locations independently of events. Now it does.

One reason I hesitated was I didn’t want to provide a template that would lock you into a specific presentation, without taking into account individual preferences for which mapping service to use or how events should be presented to your audience.

My solution is to provide a default format but let you edit it however you want, using the WordPress editor. Details like whether you want the location to appear at the top of the post, the bottom of the post, or in the middle are left up to you. I’m shooting for a little more consistency, but no foolish consistencies.

Add a location

Click the Location button in the event editor, and you will get a form that lets you add a new location. Give it a name and put in the address details. You can manually add a map link or let the software generate a Google Maps link (be sure to test it afterward to make sure it guides people to the right address).

When you click Add, the formatted address will be inserted into your event post. It will also be saved as a special kind of RSVPMaker post. The next time you want to add that address, you will be able to pick it from the dropdown list and click Choose.

Get a saved location

You can change or enhance the content of one of these saved locations using the WordPress editor. For example, you might want to add a location photo to point out a hard-to-find entrance.

Locations are listed under RSVP Events when you have it set to Show All (rather than sorted to show only future events). The Edit button shown in the dialog above will also guide you to the correct post.

Here’s an example of retrieving that sample location to add it to an event post.

Inserting a saved location

If you want to provide any special styling for the display of locations, there are several class tags you can take advantage of:

Here’s an example of a little CSS I experimented with using the WordPress Customizer tool

… which results in this:

Styled location output

 

Color-Coded Event Posts

Here is an example of how you can style your RSVPMaker listings for different types of events, using class tags in the HTML that correspond to the event type you set in the WordPress editor. RSVPMaker’s event types work like categories for your blog. I prepared this example in response to a question:

The question was whether the color coding could be associated with an RSVPMaker event template.

The answer is yes — if you assign a category to the template, it will be applied to all the events you generate based on that template. Here’s an example of a color-coded calendar and event listing. I’m not offering this as an example of good design necessarily, just an example of what’s possible.

January 2018
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
 
1

 

2

 

3

 

4

 

5

 

6

 

7

 

8

 

9

 

10

 

11

 

12

 

13

 

14

 

15

 

16

 

17

 

18

 

19

 

20

 

21

 

22

 

23

 

24

 

25

 

26

 

27

 

28

 

29

30

31

     
Month/Year /

Monday January 29, 2018 7:00 PM
 

This one does not have colored styles.

Event Types:

Tuesday January 30, 2018 7:00 PM
 

Sample showing how to style event posts by event type.

Let’s see how this works.

Event Types: ,

Wednesday January 31, 2018 7:00 PM
 

Sample showing how to style event posts by event type.

Let’s see how this works.

Event Types: ,

The event headlines shown in the calendar are coded like this

While the body of an event post as listed on the page begins with this coding on the div

This means we have two class tags we can target .team_blue vs .team_red (on the a tag) and .rsvpmaker-type-team-blue vs .rsvpmaker-type-team-red (on the enclosing div or the article tag on a single post view).

In addition to styling the div or article tag with class .rsvpmaker-type-team-blue we can target the headline, paragraph and div tags etc. inside of it as in this code for the example above.

If you do not want to hack your theme’s style.css or the stylesheet used by RSVPMaker, you can add a few quick CSS customizations of this sort using the Additional CSS tab of the Customizer.

Note: One inconsistency is that the RSVPMaker class tags for calendar items have terms separated by underscores, whereas the rsvpmaker-type tags on posts have terms separated by hyphens and all the terms are rendered in lower case. The class tags on calendar items are not necessarily lower case. So the event type entered as “Special Event” in the editor comes out as Special_Event on the calendar but rsvpmaker-type-special-event as the class wrapped around the event post. (I could change it to make it more consistent, but I won’t because I don’t want to break the website of anyone who is using these tags as-is.)

The important thing is it works.

I hate outdated websites. If the event or the deadline is past, why are you telling me about it?

Outdated websites are the worst. Particularly when it’s obvious. When you view the home page and it’s advertising an “upcoming” event that happened a week or a month ago. Or urging you to take advantage of a limited time offer for which the deadline is already past.

Is that really the worst thing a website could be? Nah, I suppose it could be ugly or disorganized or unprofessional in a lot of different ways. But it’s one of the things I see regularly on websites that are otherwise very polished. The big event, or the date of the big promotion, has come and gone, but no one has gone back to refresh the website. If it goes on for a few days, it’s forgivable: we all have lots of other things to do. Pretty quickly, though, it starts to look like a sign of neglect.

Here’s the thing: computers can tell time. Content management systems can be configured to let outdated content expire or fade into the background. Just by using a blog and posting to it regularly, you can display your latest content more prominently than older content. For people to be able to find your original announcement of an event in the blog archives isn’t a bad thing, as long as there is more recent content (photos of happy people in the event recap) piled on top.

RSVPMaker event listings address this in a different way, allowing you to display a calendar of events in order of event dates as opposed to in order of posting date (blog style). Site visitors can navigate back through the calendar to find old event posts, but the upcoming stuff is always displayed more prominently.

When you want to embed a featured event on the home page, you can set that up using the rsvpmaker_one shortcode and specify that it should expire after the date is past. I also provide an rsvpmaker_timed shortcode that you can wrap around any block of content with start and/or end times specified for when it should be displayed. (Both are not new but have been improved in recent releases).

The rsvpmaker_one shortcode

The rsvpmaker_one shortcode is particularly intended as a way of displaying an event on the home page or a landing page. Use it to display a specific event, or the next scheduled event, or the next event in a specific category (like the next webinar). You can display the full event, with either the RSVP Now! button or the registration form included, or a show compact version. You can also extract elements like the date, the button, or the form to be used in a custom layout. In the context of this post, the important thing is that it can be set to expire (disappear off the page) when the event date is past.

There is a button on the button bar (the clock icon) to help you get the parameters right.

Options for embedding a single event

Examples of the shortcode:

Retrieve a specific event by ID and display it along with the registration form. Expire it 6 hours after the start time of the event.

Show the next event in the webinar category (if none is scheduled, don’t show anything). Instead of displaying the whole form, show the RSVP Now! button.

You can also add a style attribute where you specify CSS for a div to be wrapped around the featured event. Example: style=”border: thin dotted #222; padding: 10px;” for a dotted border.

The rsvpmaker_timed shortcode

The rsvpmaker_timed shortcode is a quick-and-dirty way of specifying a start and/or end date for displaying a chunk of content. I’m sure there are other plugins or themes that provide something like this as a feature, but consider this a little something extra you get “for free” with RSVPMaker.

Here’s an example of how you would set it up:

Limited time offer
Use of the rsvpmaker_timed shortcode

The basic usage is like this:

Alternatively, you can do this:

The output is similar to what you would get from the example shown above (the one with the closing [/rsvpmaker_timed] tag), except that we’re pulling the content from another post. The style attribute is also available with this one, if you would like to apply a border or background color to the featured chunk of content.

If you don’t specify time of day, midnight is assumed (a December 26 end time means the post will stop displaying 1 second after midnight that morning). To make the start and end times unambiguous, you may want to put them in SQL format.

I currently don’t provide an editor button for finding the post or page ID, but you can grab it easily enough from the address bar in the WordPress editor.

Finding the post ID

I would typically suggest creating this chunk of content as a blog post. If you don’t want to make it public in the regular navigation flow of the site, you can save it as a draft and still use the WordPress editing tools to format and update that chunk of content independent of the page you are embedding it in.

If you want to use a page or any other post type, you need to add a post_type attribute.

Example:

Note that if you use a caching plugin, content may not disappear immediately after the end time you specified but only when the cache is purged or refreshed.

Those are my latest entries in the war against outdated web content.

Adding a Custom Payment Gateway to RSVPMaker

RSVPMaker now supports two payment methods, PayPal and Stripe (via integration with the WP Simple Pay Lite for Stripe plugin), but I recently got a request from someone wanting to add an additional custom payment gateway. Now you can by using the hook ‘rsvpmaker_cash_or_custom’.

I’ve always tried to keep RSVPMaker developer-friendly for those who want to extend it. If you come up with something cool that ought to be part of the standard distribution, I hope you will consider contributing it to the project.

The new Default Payment Gateway heading on the settings page now includes 3 options: PayPal, Stripe, and Cash or Custom. The Cash or Custom setting can also be used by anyone who wants to display pricing on the website even if they will tell people to pay by cash or some other means, rather than paying online.

In the case where you are implementing a custom payment gateway, you would write a routine something like this.

Normally, what you would do in this space is output the payment button or other user interface code for the payment gateway functionality you are adding. This sample function just dumps all the data you get to work with related to the pricing and the information the user submitted about themselves, such as the email address for a confirmation message.

Want to add a custom payment method?

You would then take responsibility for handling the user’s submission. Ideally, you want to capture confirmation of the completed transaction and log the payment as complete in the RSVP report. Here is the function call.

In this example:

‘blockchain’ is the label for my custom payment method
$amount is the amount paid in this transaction
$rsvp_id is the ID for the event registration
$event is the post id ($post->ID)
$transaction_id is an optional transaction identifier, intended for an ID # you got back from the payment service

Here is what you get to work with (the output of the test function shown above, with an example user entry).

Charge

300

Invoice ID #

rsvp126102

Tracking # for payments

RSVP ID #

Unique ID for main database record for registration

5

Details

Details about the transaction

Profile

Details about the person

Post

Creating an Events Registration Landing Page with RSVPMaker

Improvements for RSVPMaker often arrive when I see the need for them in my own projects, and recently I found myself creating a landing page for a series of workshops at Online Presenters. This is a Toastmasters club I founded, which focuses on helping members develop skills for webinars and online meetings, presentations, and trainings of all sorts.

landing page example
Online Presenters Landing Page

Because the workshop series is intended as a recruiting tool, I wanted our promotions (including some paid Facebook ads) to direct visitors to a page with a clear call to action — RSVP Now! — with no distractions that might tempt them to click away to another page or blog post. That meant the regular page sidebar and the menu at the top of the page had to go. Continue reading “Creating an Events Registration Landing Page with RSVPMaker”

Cutting Prices for Events Website Hosting

I’ve updated my pricing on two easy ways to get access to a WordPress website with RSVPMaker events management already integrated, lowering the price of entry to $75 from $99. Hosting your site with Carr Communications Inc., creator of RSVPMaker, makes sense if event management is one of the main purposes of your site. We can offer closer support, including PayPal setup, if you host your website with us.

Subdomain Hosting

For $75 per year, you get a website at an address like seminar.rsvpmaker.com. We handle the web hosting and technical details, but you get access to all the standard WordPress features, plus the event management capabilities of RSVPMaker. This fee includes assistance setting up the site to allow you to accept event payments via PayPal.

In addition to posting your events, you can promote them through the blog and build out other pages for details like speaker bios and your event agenda.

Sign Up Now

Subdomain Label
Administrator’s email address


Independent Website Hosting

Price: $175 per year for hosting of your own independent website, plus configuration assistance and RSVPMaker support. This gives you greater freedom to configure your site however you want and make your own decisions about adding themes and plugins, without being limited to those available on RSVPMaker.com.

Sign Up Now

Domain Name


Note: Hosting fee does not include domain registration or copywriting, consulting, and design services. It does include setup and proper configuration of WordPress site and RSVPMaker, as well as updating of all code so you always have the most recent, most secure, and most functional versions.

As with hosting anywhere else, the customer gets FTP access to the server and can perform their own additional customizations. Includes 5 GB disk space. Data center services provided by LiquidWeb, comparable to standard shared hosting plan.

How RSVPMaker Looks Up Prior Event Registrations

The latest updates to RSVPMaker were inspired in part by this post on the WordPress.org support forum for the plugin.

Users within my organization tend to forget that they’ve registered for an event and wind up RSVP’ing multiple times. How can I restrict duplicate entries with an error message that says that they’ve already RSVP’d to an event?

One of the new ways I am trying to address this is with a JavaScript / AJAX powered lookup of any prior RSVPs associated with the user’s email address. As they start to type their email address into the form, they will see prompts to update any matching record, and as they type more of their email address the list of possible matches should narrow until there is only one (or none if they had not previously RSVP’ed using that email address).

Looking up matching RSVPs by email address.

A user can follow the link in that prompt to update their previous registration, if necessary. Or they may just need to be reminded that a registration for them is already on file.

This mechanism is actually a fallback. The standard email confirmation message includes an Update RSVP link users can follow to update their record. However, that only works if they go back and find the confirmation message.

Similarly, when you invite people using the MailChimp integration, their email address is embedded in the RSVP Now button. The idea there was always to save them some typing by looking up profile data from any previous RSVPs so they would not have to type it in again. (In the process of updating this code, I fixed a few bugs that were preventing this process from working properly).

If someone responds to the invitation, forgetting that they previously registered, RSVPMaker will ask them if they want to update their previous response. Similarly, if RSVPMaker detects a cookie associated with a previous response to the same event, it asks if they want to update that response rather than entering a new one.

update rsvp prompt
Update RSVP? prompt

What is the scenario where the user would NOT want to update the previous RSVP? There are scenarios where the user wants to enter multiple independent RSVPs under the same email address. Maybe an administrative assistant is registering several executives but wants all the confirmations to come to his or her email address. Another example is a couple that shares an email address, where the husband’s RSVP should not overwrite the wife’s or vice versa. My preference would be that one person enter an RSVP with one or more other people indicated as guests, but it doesn’t always work that way in practice.

Security Considerations

There are a few potential security concerns with this scenario. The high security option would be to require users to login with a password before completing the RSVP form, and their identity would be tied to that login. RSVPMaker supports making logins required, but in many cases the more important goal is to make it as easy as possible for people to register without having a pre-assigned password.

If any information gathered on the form is sensitive, I recommend tagging it as private. You can see that with the tagging of the phone # and related fields in the default form:

The form builder utility (the popup you get when you click the “Generate form” button) also allows you to mark fields as private. If data has been recorded for that field, the message “Private data on file” is displayed instead of the private content. In other words, this prevents people from using your email address to look up your phone number or other information designated as private.

However, a mischievous or malicious user could use the lookup by email function to alter someone else’s RSVP response. I haven’t seen this be a problem, but it’s not impossible.

Design Considerations

In the AJAX-powered email lookup example shown above, the data entry field for email appears before those for first and last name. The idea is to get them to enter their email address first. If we match it to a record, we want to do that before they have reentered a lot of the same information.

I’ve made this the new default form layout for new users, but established users of RSVPMaker may need to tweak their RSVP form code. The form builder now includes an option to specify that the email field should come first.