Hosted Pages and Page Editor

You can use the page editor to create pages that allow your users to signup for your Sailthru newsletters, manage their profile data, opt in and out of lists, and opt out completely.

Hosted pages use your link rewriting domain (set in account settings) as the base URL. For example, if your link rewrite domain is "link.mydomain.com," your hosted pages will be accessible via "link.mydomain.com/pagetype/pagename." See below for specific examples per page type.

There are 3 page types, each with its own behavior.

• Signup
  • Add users to list or lists, collect personal data (vars). Useful for signup pages, contest pages.
  • The page is publicly accessible via this URL: [link domain]/join/[pagename]
    • i.e., link.yourdomain.com/join/signup
    • Provided the page name is unique, link.yourdomain.com/signup will also redirect to link.yourdomain.com/join/signup
• Manage/Optout
  • By default, your account uses the Sailthru-built opt-out page. This page uses your default CSS stylings, but is otherwise unable to be edited. You may create a personalized opt-out page using the editor, but it must be tested and approved by Sailthru staff before it will be allowed to go live.
  • As a further best practice, Sailthru suggests making your opt-out page allow for "opt-downs." If your newsletter sends daily, consider allowing users to subscribe instead to a weekly edition instead of losing the user entirely. Provided these lists and campaigns exist, you can build your own opt-down page that keeps users engaged through a variety of options. This is also referenced as a "preference center" or "user management page."
  • The page is publicly accessible via this URL: [link domain]/manage/[pagename]
    • i.e., link.yourdomain.com/manage/pagename
    • Provided the page name is unique, link.yourdomain.com/pagename will also redirect to link.yourdomain.com/manage/pagename
• Other
  • Create "Thank You" pages for redirects after successful sign ups or preference changes.
  • The page is publicly accessible via this URL: [link domain]/page/[pagename]
    • i.e., link.yourdomain.com/page/pagename
    • Provided the page name is unique, link.yourdomain.com/pagename will also redirect to link.yourdomain.com/page/pagename

Important: While the page editor assists in design, presentation and previewing, it does not currently validate form code. General familiarity with HTML, specifically with form code, is highly suggested when creating pages. If you need assistance, please contact Sailthru support.

These are pages that new users can go to to sign up for lists with email address and any personal data (vars) you'd like to collect. If you give each page a default list, the user will be signed up for that list. You can also add additional checkboxes or radio buttons that users can use to sign themselves up for additional lists. See the step-by-step tutorial in the next section for example code.

You can get your users' data into Sailthru by changing the names of your form inputs. To get a user's email address, you'll need to name the field 'email' as displayed below. Signup pages must have an input tag with the name email.

<input type="text" name="email"/>

To store other info about a user, make the name of the field a key in the vars array like this:

<input type="text" name="vars[first_name]"/>

To get your users to sign up for lists, make the name of the checkbox a key in the lists array with the name of the list, like this:

<input type="checkbox" name="lists[my_list]"/>

If you'd like to limit the values that can be submitted or make certain fields required, you can add an attribute called data-validation to the input tag, like this:

<input type="text" name="vars[zip_code]" data-validation="required postalcode"/>

If you'd like to show an error message when the user enters an invalid value or fails to enter a required field, you can put the error message inside of an html element and give that element an attribute called data-errormsg with the name of the invalid input as a value, like this:

<input type="text" name="vars[first_name]" data-validation="required"/>
<span data-errormsg="vars[first_name]">Tell us your first name</span>

The error message element will only be visible if the the user fails to enter a valid value for the field in question.

These are pages that users can access to edit their data and opt in and out of lists, or opt out of email completely. List management pages require an email to be passed through the url (GET) or posted; if no email is sent the user will not be allowed to see these pages.

List checkboxes and radio buttons on management pages will be checked if the user is a member into that list and unchecked if they are not a subscriber.

1. Access the Hosted Pages area in the Sailthru interface

2. Press New Page

3. Under Name, write in whatever you want this page to be called. In the Type dropdown, select User Management

4. You are creating a web form page. So, at the top of your code, you should have something like this:

<form method="post">

5. You may include two types of inputs on your form: radio buttons and checkboxes. Radio buttons will not allow a user to select multiple lists within a group; checkboxes will.

6. Radio buttons must have name="listgroup[<list group name>]" and value="<list name>". So if you want to allow the user to chose between multiple categories of lists (for example, you have a “Sports” weekly and monthly newsletter, and a “Fashion” weekly and monthly newsletter), you could do:

<p>How often do you want to receive the Sports newsletter?</p>
<label><input type="radio" name="listgroup[A]" value="DailySports" /> Every day</label>
<label><input type="radio" name="listgroup[A]" value="WeeklySports"/> Once a week</label>
<label><input type="radio" name="listgroup[A]" value="" /> Do not send me the Sports newsletter</label>
 
<p>How often do you want to receive the Fashion newsletter?</p>
<label><input type="radio" name="listgroup[B]" value="DailyFashion" /> Every day</label>
<label><input type="radio" name="listgroup[B]" value="WeeklyFashion"/> Once a week</label>
<label><input type="radio" name="listgroup[B]" value="" /> Do not send me the Fashion newsletter</label>

7. Checkboxes add or remove a user from a particular list; they do not belong to groups and need only contain name="lists[<listname>]". So if you wanted to give people the option to subscribe to any or all of the above, you could do:

<p>Which newsletters would you like to receive?</p>
<label><input type="checkbox" name="lists[DailySports]" /> Daily Sports newsletter</label>
<label><input type="checkbox" name="lists[WeeklySports]" /> Weekly Sports newsletter</label>
<label><input type="checkbox" name="lists[DailyFashion]" /> Daily Fashion newsletter</label>
<label><input type="checkbox" name="lists[WeeklyFashion]" /> Weekly Fashion newsletter</label>

8. There are two special values that represent optouts:

Additionally, if the user arrives on the page via a transactional message, they can also optout of the individual template/message type:

In order to comply with spam laws and treat your users nicely, each optdown page MUST include the .optout_all option. We recommend having this be a button. The code could look something like this:

<input type="submit" value="Unsubscribe From All Mail" name=".optout_all" />

9. You also should always include a button that submits the form and applies the user's changes, like so:

<input type="submit" value=“Button text goes here”/>

10. This page can then be styled in CSS and made to have a similar look and feel to the rest of your newsletter.

You can create static pages that contain no functionality – for example, to present a thank-you to a user who has signed up.

After a user submits their information, you can redirect them to a URL on your own site, or you can create a static page and redirect the user to that page.