Creating a YouTube Live Event, with a Landing Page on Your WordPress Website

YouTube Live allows anyone to play TV talk show host or broadcast live marketing, tutorial, or entertainment content to the world. I use it to share information about RSVPMaker and related software and to conduct interview programs.

Using RSVPMaker and your WordPress-powered website, you can use YouTube Live as a free webinar platform, registering attendees and directing them to a landing page on your website. After the event, you can gain further mileage out of the event by making a replay available on that same page (YouTube will automatically archive your event for replay).

This tutorial follows the exact process I followed to schedule and begin promoting a December 7 webinar on RSVPMaker.

YouTube Live is the latest version of what used to be called Google Hangouts on Air, now divorced from the Google+ social network. That change made some of the older tutorial content I’d published obsolete, and this is an update.

Here is how you can create one of these events:

First, log into your Google account. Go to https://www.youtube.com/my_live_events or navigate to that page from the YouTube video manager.

Click New Live Event and fill out the form. It should look something like this:

YouTube Live settings for an event.
YouTube Live settings for an event.

You will also create a corresponding RSVPMaker event for the same date and time. Because you may get attendees from other timezones, I recommend you tweak your RSVPMaker date/time display settings to specify that timezones should be displayed on your website.

Creating the Landing Page

Even before you create the RSVPMaker event, you may want to create the landing page for your site, so the RSVP confirmation can include directions on how to tune in at showtime. Some marketers may prefer to use some specific landing page software, but for my purposes this is a regular WordPress page not included on any menu but not managed with any fancy security either. Rather than making it a top secret, I am encouraging people to register for the sake of getting a calendar invite, plus an email reminder on the day of the event.

Here is what the setup for my event landing page looks like in the WordPress editor:

Editing the landing page
Editing the landing page

I’m showing this in Text mode, so you can see the code, whereas the visual editor would include a representation of the YouTube player. For the player, I need only include a YouTube URL on a blank line, and WordPress handles the video player setup automatically.

Right below that, you will see an iframe code. That is what allows the YouTube comments feature associated with the video to be displayed on my website. Viewers could also interact with the YouTube Live broadcast on youtube.com, but all things being equal I would rather keep them on my own branded website.

Update: you can skim lightly over this next section for background and pick up where I explain the new shortcode for adding the comments field.

See the YouTube documentation for a complete explanation, but the short version is that I need to capture the ID for the video and plug it into this iframe format. Here is where you will find the ID, in either the long or short versions of a YouTube url:

  • https://www.youtube.com/watch?v=IDHERE
  • https://youtu.be/IDHERE

The other piece of information I need is the domain (including www or other subdomain) where the landing page will be hosted. If my ID was IDHERE and my domain was demo.example.com, then the URL for my iframe would be:

https://www.youtube.com/live_chat?v=IDHERE&domain=demo.example.com

So my iframe is something like:

Here is what it looks like on the website before the show has begun. If you click Play on a YouTube Live video before showtime, what’s displayed is a countdown clock showing the time until the show is scheduled to begin.

YouTube Live video player and comments box.
YouTube Live video player and comments box.

Shortcode for YouTube Live Chat

A new shortcode, [ylchat] simplifies the process of adding the YouTube Live comment stream. The shortcode function extracts the video ID from the YouTube link included in the page, detects the server domain, and constructs the iframe for the chat window, according to Google’s specifications.

You can add attributes for width and height to override the default values (100% wide x 200 pixels tall). To make the comments box stop displaying after the end time for the webinar, use the attribute until, as in:
[ylchat until=”January 30, 2017 8 pm”]
or
[ylchat until=”2017-01-30 20:00:00″]

The issue is this particular chat stream is only active during the live event, and an error will be displayed in this spot if someone views the page after the event is over. When you set the until attribute, the shortcode function effectively deactivates itself after the time you specify is past.

Confirmation Message and Reminders

Now when you create your RSVPMaker event, you can incorporate a link to the landing page as part of the confirmation displayed on screen and sent to the attendee via email …

Confirmation Message: Live Video Chat: RSVPMaker for WordPress Demo/Q&A Wednesday December 7th 7:00 PM EST

Thank you for registering!

On December 7, 2016 at 7 pm EST, please tune in at
https://rsvpmaker.com/rsvpmaker-demoqa-december-2016/

You will be able to post questions during the event using your Google account, or you can tweet them to @davidfcarr before or during the event.

… as well as one or more reminders:

Set for 2 hours before the start of the event

Subject: REMINDER: Live Video Chat: RSVPMaker for WordPress Demo/Q&A Wednesday December 7th 7:00 PM EST

I hope you haven’t forgotten you signed up for my webinar tonight!

On December 7, 2016 at 7 pm EST, please tune in at
https://rsvpmaker.com/rsvpmaker-demoqa-december-2016/

You will be able to post questions during the event using your Google account, or you can tweet them to @davidfcarr before or during the event.

Conducting Your Event

At showtime, you will then launch your YouTube Live program from the Live Events page on youtube.com. You can invite in guests to join you in the live program and screenshare to demo software or show slides. It’s a good idea to get everything organized, including getting your guests signed in, at least 15 minutes prior to the start of the live program.

To make it easier to keep track of questions coming in on the YouTube comment feed, I recommend opening a popup window version of that feed, which you can do from either the public page for the event or the YouTube Live “video control room.”

Displaying the YouTube chat in a popup window.
Displaying the YouTube chat in a popup window.

When you start the live broadcast you can then switch to that chat window periodically to check for questions coming in.

A YouTube Live session with the pop-up chat window displayed.
A YouTube Live session with the pop-up chat window displayed.

For more about how to conduct a YouTube Live session, see the official help documents.

I still like Pat Flynn’s How to Run a Q&A Session Using Google Hangouts on Air as an explanation of how and why to run one of these programs, although some of the content is dated because it refers to the old Google+ incarnation of this service.

I also recommend you get familiar with using the YouTube video editor to trim away extraneous content. For example, I often broadcast a “we will get started in just a few minutes” greeting before the program actually starts, but I don’t want that to be something people see when they watch the replay. See Adding, Then Editing Out, a Hangouts on Air Pre-Show Greeting.

The separation from Google+ is mostly positive, BTW, since trying to convince people to get an account on that service in order to participate was a losing proposition. However, it meant some features went away such as the Q&A app that was linked to Google+. I found the popup chat window worked just as well for my purposes. I’ve also experimented with embedding the YouTube Live player on a page with Facebook comments enabled, where I thought my audience was more Facebook friendly.

If you come up with other approaches, please share your ideas.

Updated Guidance for Using YouTube Live vs. Google Hangouts with RSVPMaker for WordPress

You may have already heard the news: Google is killing off Hangouts on Air in September. A few months ago, I made a big deal out of announcing support for Hangouts on Air in RSVPMaker and using it for my own live events. That work wasn’t actually wasted, and “killing” in that headline is a little misleading, but the instructions I shared for setting up these events will be obsolete soon when the Google+ version of Hangouts on Air goes away on September 12.

Google’s new answer for basically the same thing is YouTube Live, which you can set up to work almost exactly the same as a G+ Hangout. In fact, the YouTube creator UI still makes some references to Quick setup (using Google Hangouts on Air) as a label for the technology, but YouTube Live is now the favored branding.

youtube-event-setup

The biggest difference from my point of view is that the Hangouts Q&A tool is going away. That was one of the features closely tied to a Google+ identity. In most respects, this change is a positive because there’s no longer a need to explain to people why they need to get a Google+ account just to post a question in your webinar. However, the question is what to use instead. Google’s announcement said something about using a Q&A tool in Google Slides.

What I’ve decided to do instead for a webinar I’m planning for the WordPress for Toastmasters project is use the Facebook comments system as an easy way for anyone with a Facebook account to post questions. After creating my YouTube Live event, I plugged the YouTube url into a blog post. In the RSVPMaker confirmation message I send to people who RSVP, I include the link to that blog post with some explanation of how the event will work. I also set up a reminder message with the same information to go out a couple of hours before the start of the event. Here is what that looks like:

Confirmation Message: Marketing Your Toastmasters Club and Organizing Meetings with WordPress for Toastmasters Wednesday August 31st 7:00 PM EDT

This event will be conducted using YouTube Live, Google’s free video broadcast service. You will find the YouTube video feed embedded in this blog post:

http://wp4toastmasters.com/2016/08/23/august-31-webinar-on-wordpress-for-toastmasters/

You can post questions in the comments section of that blog post before, during, or after the event, and I will try to answer them “on air.” If you would like to be invited into the on air event, contact me with an explanation of what you could contribute to the discussion.

You can also view this event on YouTube and it will be archived for replay:

YouTube: https://www.youtube.com/watch?v=Bqnly_IrH4o

Just remember that if you want to ask questions, please post them via the blog.

I followed the WPBeginner tutorial on adding Facebook Comments to the WordPress for Toastmasters website. Previously, I was using Disqus on that site (as I do on RSVPMaker) but engagement has been so low I thought it was time to turn that off and try something new anyway.

I will report back here with more prescriptive instructions once I’ve seen how this works.

Use RSVPMaker + MailChimp To Send a Weekly Newsletter

Here is how you can use RSVPMaker’s built-in email utilities to send a weekly newsletter built around your upcoming events and recent blog posts. You can send to a MailChimp mailing list or to the members of your own website (if you provide user accounts).

I’ll be hosting a webinar on these techniques Weds. July 20, 2016 at 4 pm EDT.

The newsletters will look something like this when they arrive in the recipient’s inbox:

newsletter-in-gmail

In a separate tutorial, I showed how to create an email broadcast built around an individual event or blog post. Here the idea is to set up a template for a broadcast that will go out on a regular schedule, including some standard elements.

The RSVPMaker events post that serves as the basis for this newsletter consists of a couple of WordPress shortcodes, placeholders for the dynamic content to be included. In the WordPress visual editor, the rsvpmaker_upcoming shortcode is represented as rounded blue box that you can click on for a popup menu of options. Here, I’ve set it up to pull only the webinar events off the RSVPMaker site (since most of the other events are demos).

The other shortcode displays headlines and excerpts from recent blog posts.

newsletter-editor

If I were to preview the email with just those settings, here is what I would see. The subject line would be the title of my post, RSVPMaker Roundup.

newsletter-basic

To send this out on a schedule, I need to set the options in the Scheduled Email section.

newsletter-settings
Newsletter basic settings

Here I have specified that this newsletter should go out every week to the RSVPMaker email list, on Wednesday at 10 am. Also, I want a preview sent to me 2 hours prior to the scheduled broadcast (a reminder of any last-minute changes I might need to make).

The “Test for” option allows me to set a condition, such as that the email newsletter should not be sent if there are no upcoming events on the calendar.

This gives me an email newsletter that can go out week after week, always with fresh content. However, I might also want to highlight specific items or add some particular customization to a specific week’s broadcast. The Editor’s Note section allows me to either enter a note or specify a blog post to be featured in the next scheduled email broadcast.

This also modifies the subject line, with either the title of the featured post or the headline of the editor’s note appended to the email subject line.

Example: RSVPMaker Roundup – Wednesday Webinar on RSVPMaker + MailChimp

newsletter-editors-note
Adding an Editor’s Note

The settings shown above would give me an email newsletter that looks like this. This note and headline would only be applied to the one specified week’s email.

newsletter-preview-note
Editor’s note

Here is an example of a newsletter with a featured blog post included up top (note that the featured post is not repeated in the “From the Blog” section generated by the recent posts shortcode.

newsletter-preview-blog
Featured blog excerpt

This combination has served me well, and I hope you can also put it to good use.

How to Change the RSVP Now! Button

One of the basic customizations I should have documented long ago is how to change the RSVP Now! button. Here is the default button, originally created for a political campaign (hence the red, white and blue):

RSVP Now!

You can change the text, the colors, the fonts to be whatever you would like by modifying a snippet of HTML code with embedded CSS styling. It’s an option on the Settings -> RSVPMaker page about halfway down. Continue reading “How to Change the RSVP Now! Button”

How to Promote Events with MailChimp + RSVPMaker

Here is how you can promote events through a MailChimp email list and get people to register or RSVP, while driving more traffic to your website in the process. MailChimp support arrived in RSVPMaker with version 4.0 and makes it easier to craft broadcast email messages that incorporate RSVPMaker events and other WordPress content.

You begin by composing the content of your event using the standard WordPress editor. I will use the example of a July 20th webinar I’m planning.

Composing an event
Composing an event

Below the content editing area, you will complete a series of event options such as the date and time. Here, I’m asking for people to register so I’ve checked the Collect RSVPs checkbox.

Event options
Event options

Because this event is a webinar, I’ve created a detailed confirmation message that includes the links people will need to follow to attend. You can see a little of it on the screen above, but I composed it by clicking on the Hangouts Setup link and following the prompts to set up an HTML message like the one shown below. (See more about support for Google Hangouts on Air).

I’ve also set the website to send a reminder message to attendees two hours before the event.

webinar-reminders
Confirmation and reminder messages

I also customized the signup form, mostly to simplify it by eliminating options like the blanks for adding guests (which make more sense in the context of an offline event).

I also specified that I would like an “Add me to your email list” checkbox to appear on the signup form. This will allow people who aren’t already on my email list to join it at the same time that they complete the RSVP form.

In other words, I hope to build my email list at the same time that I am registering people for the event.

Setting up the form
Setting up the form

Once I am happy with the event I have created, I can create a draft of a broadcast email message based on that event.

A Send Invitation link now appears on the listing of events. There is also a Content for Email screen you can use to select content to be included in an email broadcast (which also allows you to import blog posts or listings of posts).

Send Invite link
Send Invite link

Imported content is loaded into the WordPress editor, now being used to compose email content. The default title includes the title of the event, along with the date. The email message does not necessarily have to include the verbatim content of your event, but you can use this as a starting point for your invitation email. The imported event includes the RSVP Now! button to encourage people to respond.

Imported content also includes a placeholder (the “INTRO” text) for you to add an introductory message.

Composing an email based on the event post.
Composing an email based on the event post.

Once you are happy with the content of your email broadcast, you can preview it on your website. It will be displayed in a special template specific to events. You can customize the HTML to be used in the template from within WordPress to add elements such as a logo or change the default background color.

If you see changes you want to make, click Revise to go back to the editor. I also typically send a preview version of the email to myself before submitting it to MailChimp.

When you are ready to send your broadcast, check the MailChimp list checkbox, confirm that you have the right list selected, and click Send Now.

Previewing and preparing to send the email.
Previewing and preparing to send the email.

I’ve actually used related techniques to send email broadcasts and regularly scheduled event roundup newsletters to various communities for several years. That approach has also been standardized as part of this latest RSVPMaker release.

As you can see, I’m planning a July 20 webinar to showcase these features and gather feedback on how to make them better. Try it, and let me know what you think.

Event Type Pages and RSS Feeds for RSVPMaker

If you assign an event type to an RSVPMaker post, site visitors can now click through to see an archive of related events. This is similar to how you would view all the blog posts in a category, except that only future events are shown in order of event date.

You can now also share RSS feeds of upcoming events and event types. Once you find the url for an event type archive, just add /feed/ to the end to get the RSS. Here are a couple of examples.

A feed of all the upcoming events tagged as featured:

https://rsvpmaker.com/blog/rsvpmaker-type/featured/feed/

A feed of all the events on the RSVPMaker website:

https://rsvpmaker.com/rsvpmaker/feed/

(Most of them demo events).

Here is an example of an event type archive. If you are ambitious enough to modify your theme, you may be able to improve the default display by creating custom templates. The naming convention is archive-rsvpmaker.php for all rsvpmaker posts or taxonomy-rsvpmaker-type.php for event types.

A listing of posts tagged with an RSVPMaker Event Type
A listing of posts tagged with an RSVPMaker Event Type

Using RSVPMaker on Membership Websites

Version 3.9.7 adds better functionality for membership websites, where the people entering RSVPs have user accounts and log in prior to responding.

  • The system will now automatically look up any previous RSVPs associated with the same account (which for unauthenticated users only happens if they click the update link in a confirmation email).
  • Form fields will be filled in based on user metadata, provided that the form field names match the usermeta fields. Example: a membership site records the user’s work number as work_phone, and the form field is also labeled work_phone, so the work phone number on the user’s profile is filled in by default on the RSVP form.

Here is an illustration of that last point:

Adding the Work Phone field in the form generator.
Adding the Work Phone field in the form generator.
The generated code for the form, with Work Code as the label displayed to the user but work_code as the field ID.
The generated code for the form, with Work Phone as the label displayed to the user but work_phone as the ID for a text field.
The work phone number is filled in by default on the form.
The work phone number is filled in by default on the form.

The RSVPMaker form generator is a simple utility that does not address all possible variations. One that would require manual coding is to make a field containing profile data a hidden field rather than a user editable one. For example, a hockey league that contacted me with the request for this feature has a custom profile label for “Team,” which is a value they might not want users to be able to alter on an event-by-event basis. Or you simply might not want to display information including name and email address that is already in the user profile table.

To make the form fields hidden instead of editable, we would manually change the form code “textfield” to “hidden” as in this example:

<p class=”work_phone”><label>Work Phone</label> [rsvpfield textfield=”work_phone” ]</p>

Becomes:

[rsvpfield hidden=”work_phone” ]

Whether this will work with your membership plugin of choice depends on how it handles custom profile data. So far, I’ve tested it with my own RSVPMaker for Toastmasters plugin as well as the Ultimate Member plugin (which is used by the hockey league I mentioned). You can also program your own user profile fields by creating your own plugin or custom theme (with the code added to functions.php). For RSVPMaker to retrieve custom profile data, it must be recorded as standard WordPress user metadata, which is recorded in the database table typically named wp_usermeta (some sites may change the prefix to something other to wp_). The user metadata field names must also follow the convention of being all in lowercase with an underscore in the place of any letters or punctuation, which is the same way the RSVPMaker form generator formats field names based on the label text.

Video: Simplified PayPal Setup, Plus Payment Process and RSVP Form Improvements

As part of my preparation for a webinar on RSVPMaker, I have been working on satisfying some longstanding requests from users of the plugin to simplify the PayPal setup and the setup of the RSVP form itself. These improvements are in version 3.7, just released.

Just the other week, I heard from a wedding planner who wanted to prompt users for a meal choice for themselves and any guests — and including those choices for guests was not something RSVPMaker handled well until now.

Another bit of motivation is related to my WordPress for Toastmasters project, which is based on extensions to RSVPMaker. It used to be that enabling PayPal support required manually editing and uploading a configuration file. But now I’m hosting sites on behalf of Toastmasters clubs in a WordPress multisite setup where it wouldn’t be practical for those who want to add PayPal support FTP access. So I’ve provided a little PayPal Setup wizard on the RSVPMaker settings screen to streamline the process.

Note on Security

The reason I didn’t simplify PayPal setup before now is justified paranoia: I didn’t want to be responsible for someone getting unauthorized access to your PayPal account. I still don’t. This is why I don’t store your PayPal credentials in the WordPress database. From time to time, WordPress has been known to be hacked.

While nothing is completely secure, the file system is a little more secure than the database — if an attacker has FTP access to your site, you’re already in big trouble. The PHP file containing your user credentials is set up to prevent someone from browsing to it and viewing the contents. By giving it a random filename, rather than calling it “paypal_constants.php,” I also make it less likely that an attacker will find it in the first place.

If you do have FTP access to your site, one thing you may want to do for extra security is move the file to a location outside of web root. For example, instead of storing it in /home/rsvpmaker/public-html/wp-content/uploads/2016/02/stringofjibberish.php I might put it above the public-html directory in /home/rsvpmaker/.

If you prefer to create the configuration file manually, a sample is available here:
https://rsvpmaker.com/paypal_constants.txt.

Timed Display of Content: the rsvpmaker_timed Shortcode

Part of the point of using a calendar plugin on your blog is to have content displayed for upcoming events, but not past ones, or at least give the upcoming events people can sign up for or attend greater emphasis and display them in chronological order (rather than the reverse chronological order of a blog listing).

I always think it looks stupid for a website to be promoting an event that is already past. Computers can tell time, and we should let them do so on our behalf rather than waiting for the webmaster to get around to removing the outdated content.

Events aren’t the only example of time-sensitive content, however. We may have limited time offers or other content that has a start date, an end date, or both. WordPress lets you schedule posts to go live at a given time in the future, but what if you want to embed a bit of limited time content on your home page or somewhere else on your site?

That’s the purpose of the rsvpmaker_timed shortcode, which can be wrapped around any bit of content in a page or a post that should only be displayed after a given time, until a given time, or between a start time and an end time. For those not familiar, a shortcode is a code you enter into the WordPress editor that achieves a special effect. Here is an example:

rsvpmaker_timed coding wrapped around a paragraph for conditional display.
rsvpmaker_timed coding wrapped around a paragraph for conditional display.

This shows the shortcode open and close tags wrapped around a paragraph, but it could just as easily be a longer block of content including images or video.

The shortcode attributes are start, end, too_early, and too_late. Put a plain language date like ‘January 1, 2016 7 pm’ in the start and/or end fields, or use a database style date like ‘2016-01-20 19:00′ and RSVPMaker will test the current time against those rules.

If a visitor is coming too the site too early or too late, according to those rules, the shortcode will return either an empty string or the contents of the too_early / too_late parameters, if set. Otherwise, the content will be returned as it normally would be.

Note that if a time is not specified, in addition to the date, the time is considered to be “00:00:00″ — first thing in the very early morning of that date. So if what you really want is to specify a cutoff at midnight, you should either put in ’11:59 pm’ or ’23:59:59′ as the end time. Alternatively, if you want content to stop being shown after January 29 is over, you could set end=”January 30, 2016”

In the context of my recent projects using Google Hangouts on Air as a webinar platform, one of the ways I am using this is to put a promotion on a website home page until the event occurs. I can provide another block of content to be displayed after the event, directing people to the replay.

Support for this shortcode was added in release 3.6.2.

Extending RSVPMaker – WordPress for Toastmasters

One of my recent side projects has been updating a series of customizations I made to RSVPMaker for use by my Toastmasters club. Toastmasters International is a nonprofit organization that teaches public speaking and leadership skills, and I’m a past club officer and current Area Governor (working with several local clubs).

If you’re reading this in mid-October 2014, consider signing into my tutorial webinar.

#Toastmasters webinar: New Web Tools For High-Performance Clubs, Weds 10/15/2014 at 7 pm ET Register: http://www.anymeeting.com/PIID=EB50D785894831

This may or may not develop into code I release as a plugin — for now, I’m trying my hand at the software as a service business model over at wp4toastmasters.com.

Possibly some aspects of this work could find their way back into RSVPMaker if you see additional uses for certain features. Instead of collecting RSVPs, the thing we want to accomplish with Toastmasters meetings is to sign people up for specific roles. Since this is a membership organization, people log in and identify themselves rather than typing in their names etc. Recently, I’ve been exploring ways of turning the data gathered through using the system into reports to help club officers guide their members through the educational program. You can see a bit of how it works in the video below.