Announcement Archives | RSVPMaker WordPress Plugin

Updated Admin Bar Navigation Between Events, Confirmations, Reminders, Forms, and Templates

RSVPMaker uses the black admin bar that appears at the top of the page when you are logged in to provide links to related documents and settings screens.

Because the WordPress full screen (distraction free) editor prevents the display of that menu, it’s now disabled by default when you are editing RSVPMaker posts. This navigation is important to allow you to navigate from an event post for a specific date to the event template it was based on. Recent releases have made it easier to see whether the registration form and the confirmation message are specific to the event you are looking at, as opposed to being the default version from your settings, or a version inherited from the event template.

The New option you click on for a new p0st or page lets you create an individual RSVP Event, a New Event Template, or Create/Update events based on a template you’ve defined.

Here are some of those variations.

If an event currently uses the default confirmation message for your site, you can click on the Confirmation Message (Default) link to edit the default version. Alternatively, you can click on the Customize link to create a version specific to this one event.

In this example, the messages have been inherited from a template. The form is the default (meaning the template also references the default version).

In this example, the confirmation and reminder messages as well as the form have all been customized. You can tell because even though it’s based on a template, there are no links prompting you to customize those items.

These options appear under the Edit RSVP Event menu when you are viewing an event on the public site. When you are in the edit, working with event content, these links appear with RSVP / Event Options as the top level menu item.

When you are editing a message or form related to an event, the menu changes again to provide links back to Edit Event and View Event, along with the submenu options.

Finally, here are the new improved options under the New menu. Create / Update links will be provided for any templates you have defined.

New event, versus new template, or Create / Update a series of events based on a template.

Allow Event Submissions from Website Visitors

If you run a website for a community of people who would like to be able to post events occasionally — but not often enough that you need to provide them with an author or contributor password — you can allow them to submit events for review by your website’s team of editors.

An example is shown below. This form can be added to any post or page using the RSVPMaker Event Submission editor block or the [rsvpmaker_submission] shortcode. For security reasons, event descriptions are limited to bold, italic, and link formatting. Any other HTML or script code is filtered out.

When a website visitor completes the form, an email notification is sent to the list of people you specify (either in your default settings or the block settings). RSVPMaker event posts are saved as drafts but not published until a website editor approves them.

Optionally, you can prompt users to include a timezone in addition to date and time. This is important for online events and events across many geographies, but not necessary for a website advertising local community events.

You can try the user experience here.

Event Title:

Month Day Year

Time

End Time

Timezone
Choose a city in the same timezone as you.

Your Name

If you want your contact information to be published as part of the event listing, also include it in the description below.

Event Details

Here is what the block looks like in the editor.

My experience from running community websites is that I'd rather give people a password if they are posting events regularly, partly because I want them to be able to make updates when event details change.

On the other hand, plenty of people who might have something good to share are reluctant to accept the burden of having to remember another password -- and I can't blame them. This is a way of encouraging more participation and building a more complete calendar for whatever community you serve.

Update: Release 7.7.5 adds support for Google reCAPTCHA to combat form spam. The reCAPTCHA credentials must be entered on the RSVPMaker Settings screen.

Sending Confirmation Only After Payment, for Example with the Link for an Online Event

There are now 2 different confirmation messages you can configure in RSVPMaker, one for the initial registration and the other displayed only after payment when you are charging for an event. One scenario: you’re charging for an online class or webinar and do not want to share the link until after payment is collected.

You can test it right now by signing up for the Google Photos workshop my friend and client Chris Guld is taking registrations for.

Setting the Payment Confirmation options.

By default, RSVPMaker sends a confirmation email message immediately after an event registration is recorded. However, you can now change that to say the confirmation email should only be sent after payment is confirmed.

Introducing the Daily Schedule Event Listing Block, with a Conference Demo

One of the new editor blocks available in RSVPMaker is RSVPMaker Schedule, an alternative to the calendar-style presentation meant to let you display a series of related events such as sessions within a conference program.

You can see it at the conference schedule demo site I’ve created, from which this screen shot is taken. The demo is based on a live implementation for the Toastmasters District 47 annual conference (which this year turned into a virtual event).

WordPress enthusiasts might consider this as a way of sharing a WordCamp event schedule.

The setup for the conference schedule demo is that there is one RSVPMaker event post that serves as the registration page for the entire weekend event. Each conference session is then modeled as its own RSVPMaker event. As displayed within the RSVPMaker Schedule listing, the sessions of the individual presenters are grouped by day, with the time that they are speaking shown as part of the session headline.

3 Confirmation Message Design Examples

Here are examples of designs created using techniques laid out in the blog post Styling Your Confirmation Messages and Broadcast Emails. RSVPMaker now provides the flexibility to style confirmation messages for different events differently.

White on Black

Here’s the black background confirmation message for a pirate party. This design allows me to specify styling on the RSVP button (Update RSVP in the case of a confirmation message) differently from the one used elsewhere on my website.

White on Black Email Template

Using Gutenberg Columns in the Template

One technique for creating an template layout is to rough out the design in the WordPress editor, then copy the resulting HTML and elements such as shortcodes and dynamic Gutenberg blocks into the body of an email template.

Here, I have created a 2-column layout in the editor and a centered image to appear beneath the columns. The left column contains the [rsvpmaker_email_content] shortcode for dynamically generated content such as confirmation messages. The right column contains a heading block, followed by the latest-posts block to display the latest blog posts (where the idea is to encourage the person who has registered for an event to explore other website content).

Note: I had to use several hacks to make the two columns display acceptably on a mobile email client:

.wp-block-column {max-width: 50%}
.rightmain {padding: 10px;background-color:  #191D6C; color: #EEEEEE; height: 95%; }
.rightmain a {color:#FFFFFF; font-weight: bold; display: block; margin-bottom: 10px; margin-left: -30px;}

See the explanation of columns and CSS inlining.

Using Gutenberg columns to define a sidebar with latest posts.

Adapted from a MailChimp Sample

You can use a sample template provided by MailChimp, or created using MailChimp’s design tools, as the basis for a template you can use within the RSVPMaker mailer tool — including messages RSVPMaker handles itself, such as confirmation messages, as well as messages to be submitted to MailChimp via their API.

For this example, I started with a MailChimp sample design for a fictional gallery promoting a featured exhibit. I then turned it into an RSVPMaker confirmation email template suitable for being used in conjunction with a gallery talk event.

Gallery talk template, based on a MailChimp sample design

MailChimp uses nested tables for its basic layouts, then adds CSS on top tagged to different table cells.

The process of adapting the MailChimp template to work with RSVPMaker follows this pattern:

Use the Export as HTML option in MailChimp to get the code for one of the templates in your account that you want to use.
Place the [rsvpmaker_email_content] shortcode in the table cell where dynamically generated content such as your confirmation message should appear.
Add CSS as necessary to make your content look good in the template.
Alter MailChimp’s CSS as necessary to allow you to achieve the effects you want. I had to remove some of the default MailChimp code for link styling to get the RSVP button to display properly.

Gallery Event Template

Here is the original MailChimp sample design I started with:

Styling Your Confirmation Messages and Broadcast Emails

The latest update to RSVPMaker focuses on more design freedom and better consistency for confirmation messages, reminder messages, and email broadcasts.

This push was inspired in part by a recent post on the SendGrid blog, How to Send On-Brand Confirmation Emails (+ Examples). Having noticed some shortcomings in the formatting of RSVPMaker email messages (which were annoying me as much as anyone), this project had been on my todo list anyway. The examples in SendGrid’s article nudged me to put it at the top of the list.

Here’s an example of a confirmation message for a wedding, created using these new capabilities, with the correct formatting for a section laid out using the Gutenberg columns block and a centered image below the spot where the registration details are included:

How I Learned to Create a Gutenberg Sidebar for Editing Post Metadata (Tips for WordPress Plugin Developers)

More than a year after releasing the first version of RSVPMaker with support for Gutenberg (the WordPress “block editor” introduced with 5.0), I now have an editor sidebar implementation I’m pretty happy with.

In the process, I learned more than I ever wanted to know about the WordPress Data API for JavaScript — and frankly more than I needed to know for the relatively simple thing I wanted to accomplish. I just wanted to update my old PHP-based UI for getting and setting post metadata to work in Gutenberg. The problem is not just insufficient documentation, but overwhelming documentation that can lead you in a wrong direction.

What you see below is a composite image of 2 screenshots.

What you see on the left are the most basic RSVPMaker settings (when does the event start and end? and are we collecting RSVPs?) as they’ve been added to the Document tab of the standard Gutenberg sidebar. I do that to make these basic elements of editing an event date as accessible as possible.

The insert on the right shows an additional sidebar, specific to RSVPMaker, that I can get to by clicking the calendar icon at the top of the screen. This additional sidebar provides access to a longer list of RSVPMaker settings: not just date and time, but also the email address to send registration notifications to, whether there is a maximum number of registrations to be accepted, and so on.

There are still a few more complex settings, such as those for event pricing online payments, where I direct users to a separate RSVP / Event Options screen. But I want them to be able to accomplish most tasks without delivering the editor.

The designers and developers behind the Gutenberg UI recommend providing a “distraction free” editing environment that minimizes the use of the old “metaboxes” at the bottom of the content editing window, which used to be a standard for WordPress plugin design. I also found that the JavaScript functions in my old metabox code seemed to clash with Gutenberg, so I got rid of metaboxes some time ago. But making those same capabilities available in a Gutenberg sidebar, rather than a metabox has proven challenging.

Gutenberg represents a steep learning curve for those developers who learned plugin programming in PHP and are now asked to master at least the basics of the React JavaScript framework and the Gutenberg component library. I hope that we will eventually be provided with some easier ways of handling common needs like setting the metadata of a post from within the Gutenberg UI.

Meanwhile, here are my tips on how to cope with the current state of things.

Background Loading RSVPMaker Event Listings From Any Site To Any Site

Using the new widget and/or the new Gutenberg block that have been added to RSVPMaker 6.4.2, you can display a listing of events that will be dynamically loaded from your own site or any other site that implements RSVPMaker. This feature uses JavaScript and RSVPMaker API endpoints to fetch a listing of events in the background and display it in a widget or in the body of a page.

Widget loading an event listing in the background (GIF runs in a loop)

A separate RSVPMaker Widget plugin (see below) is available for sites that want to fetch listings from a remote sites without having the full RSVPMaker plugin installed locally. Or you can embed an HTML/JavaScript code snippet in a non-WordPress site to achieve the same effect.

Advantage of Dynamic Loading

One advantage of using this technique, even for displaying events from the local website, is it may work better with websites that have implemented caching. The client can be served a cached HTML version of the page but will still see a current listing of events because it is loaded in the background via a JavaScript call to the API endpoint.

Site visitors may briefly see a “Loading …” message while event posts are being retrieved.

API urls are in the format:

https://rsvpmaker.com/wp-json/rsvpmaker/v1/future
(all future events)

https://rsvpmaker.com/ wp-json/rsvpmaker/v1/type/featured
(events tagged with the event type “featured”)

RSVPMaker Widget plugin

A separate RSVPMaker Widget plugin is available for download as a zip file (and pending as a submission to the wordpress.org plugin repository). I have been using it on websites where the full RSVPMaker is not active or needed.

Example: a WordPress multisite implementation for a Toastmasters district, where divisions within the district have their own blogs but RSVPMaker is not active on those subordinate sites. Instead, RSVPMaker is active on the main domain, and division-specific events are designated with an RSVPMaker Type tag.

The RSVPMaker Widgets plugin allows me to display a listing of each division’s events on the division site homepages, while still maintaining a single calendar of events from across the district.

HTML/JavaScript Snippet

You can also embed events listing into any website, including static HTML sites and those that run a different content management system, using the HTML / JavaScript code snippet shown below. Change the div ID and the parameters for the creation of the widget object to match your needs and modify to taste.

On a WordPress site, you can use the Custom HTML widget or the Custom HTML editor block to add this code (assuming it’s allowed by your site security) as an alternative to installing the RSVPMaker Widget plugin.

PayPal Integration (REST API)

RSVPMaker now integrates with PayPal via its REST application programming interface (API).

If you previously set up integration with the older Express Checkout / NVP API method, RSVPMaker still supports it. PayPal also still supports it but is not adding new features to that version. You probably want to switch to the new method anyway because the user experience is better and more tightly integrated with your website.

The pay by PayPal / pay by credit card buttons will appear as part of the confirmation message when someone registers for one of your events.

Attendees who click on the PayPal button will get a pop up prompt inviting them to log in and pay.

Those who prefer to pay by credit card can click one of the credit card icons (or the button on the screen above that says Pay with Debit of Credit Card) and be prompted for credit card information.

To obtain the required credentials for the REST API, go to developer.paypal.com and log in with your PayPal password. The developer’s dashboard allows you to register multiple sandbox accounts for testing and create an app for your integration. Creating an app just means you are generating the API access keys required for the integration with RSVPMaker. Just give your app a name, associate it with a sandbox account for testing, and click the Create App button.

Then copy the keys (the client id and client secret) for both the Sandbox (test) and Live versions of the app.

Copying the client id and client secret.

Once you have copied and pasted all the credentials, into the Payments Tab of the RSVPMaker settings, it’s a good idea to toggle the Operating Mode setting from Production to Sandbox. Create a sample event with sample pricing and test the integration. For testing, you can make payments using one of the sandbox accounts associated with your developer account on PayPal, which is funded by imaginary money.

Once you are satisfied that everything is working properly, go to the Payments tab in RSVPMaker settings and toggle the integration from Sandbox to Production to accept live payments.

Here is a quick video demo:

Recommended wp-config.php Debug Logging Setup

When people contact me with reports that RSVPMaker is misbehaving in some way on their websites, figuring out whether the problem is due to a flaw in my code and/or interaction with some other plugin is tricky business. This can be made more complicated by WordPress features that hide error and warning messages from being publicly displayed — a good practice, but one that can frustrate access to debugging information.

Here’s the debug logging setup I recommend adding to wp-config.php – so you can track down errors when necessary without them being publicly displayed:

@ini_set( 'display_errors', 0 );
// Enable WP_DEBUG mode
define( 'WP_DEBUG', true );
// Disable display of errors and warnings 
define( 'WP_DEBUG_DISPLAY', false );
// Enable debug logging to file, ideally outside of public_html
define( 'WP_DEBUG_LOG', '/home/mysite/debug.log' );
@ini_set( 'display_errors', 0 );

The debug file location will vary based on your server setup, but for example on my sites /home/mysite/public_html/ is where publicly visible files go, so /home/mysite/ is a more secure location for a debug log that you don’t want someone attacking your site to be able to access (bugs are sometimes opportunities for hacks).

Should come before the line that says:

/* That’s all, stop editing! Happy blogging. */

Note: these debug log files can grow large after a while, so you might have to periodically delete the file and then let it regenerate as new error and warning messages are generated. Then go try to perform whatever action wasn’t working for you.

On systems that include the Cpanel utility (or something similar), I typically use that to view and delete log files.