The new evite functionality went live this morning on WaterCMS, SkyCMS and LightCMS. This tutorial will walk you through an example of creating an evite on your website. We'll also discuss a few tips for creating content that will work well for email. My example will be creating a general "Invite a Friend" evite for the Element Fusion website. You can view the end result of this demo evite here.

Find a page to hold your evite

You can add an evite to any region on any page. Maybe you want to add an evite to an existing page. Or, perhaps you want to create a new page specifically to hold the evite. In my example, I've created a separate page called "Invite a Friend" to hold my evite.

You may also want to add a text element at the top to hold some explanatory text. In my example, I've created a block of text (shown below) to explain to the user what they should do with the evite form.

Add the evite element

Find the region you want to use and click on "add element." Then, select "evite" from the list of elements.

Complete the evite settings

Click on the "settings" button from the element control bar to open the evite settings screen. You'll need to add the following content:

Name your element. The element name is the name that the system uses to identify your element. You can also display the name if you check the "Display this title?" checkbox. You don't have to adjust this or display the title. In my example, I've left it alone.

Name your evite. You will need to add a name to this box. This name will be used in the subject line of the email that is sent out so make sure it will make sense to those who receive the email. Starting it with a verb is a good idea to request an action from the recipient. In my example, I've used "Check out Element Fusion."

Evite details. Here you'll use the WYSIWYG editor to create the content of the email that will be delivered. This works just like any text element or blog post on our system. You can add images, links, files ... etc., just like you would in other places, but keep in mind that creating content for emails can be a bit tricky since every email software tends to display things differently. We've included some tips for creating good email content below. Naturally, testing your content by sending the evite to yourself is always a good idea.

Click update. This will save your settings and take you back to the evite page.

Preview and test your evite

Once you've completed the settings, you page will display the evite form. Your site visitors will fill out this form to send the evite to their friends. You can preview the content that will be sent out by clicking on the "preview evite" button at the bottom of the screen. This will show you how the evite will look, including content that is merged in from the form such as the sender's name and personal message.

In addition to previewing, I always send a test evite to myself to see how it looks in a real email client. To do this, just fill out your evite form and put your own email address in the "Recipient email address(es)" box. Keep in mind that every email client renders content differently, so making things appear consistently across all clients is not often possible. Keeping your content as simple as possible is the best way to ensure that things look good to everyone.

Tips for creating content for email

It can be difficult to create content that looks good across all email clients. There are not yet good standards in place for the way email clients render content. However, we have a few suggestions to help you create emails that will work well:

• Images should be less than 600px wide to fit inside the viewing space of the email software in most cases. Keep in mind, 600px is just a guideline. Many people may view their email in windows smaller than 600px.
• Use the "alt" attribute on images to provide text that can be read if the images are blocked or slow to load. To do this, right click on an image in the editor and select "image properties." This will allow you to set the alt attribute.
• Use simple fonts and formats. The best option is to just use plain text and let the email client format as it may. Adding specialized styling is possible, but each email client may handle it differently.
• If you really need to create a look with consistency, create a page on your website with the full content and then just use the evite to send a simple message that links back to the page on your site. This is a really good option for event evites, which can link back to the detail page of the event on your website calendar.

Enjoy!

The evite functionality is great for creating a general invitation like the example for Element Fusion I've used above. You can also use them to create invitations to specific events or for other time-sensitive communications. However you use them, we hope you enjoy the new evite functionality and, as always, if you have any questions or problems, you can reach our team at support@publishpath.com.