If you are an Action Network partner, you can create custom page wrappers to brand your action pages, instead of using our built-in look and feel. These wrappers use your custom HTML code along with our widgets to construct the action page. Click here to contact us about becoming an Action Network partner and getting access to custom page wrappers. When using page wrappers, you can also use custom domains, so your link will appear like your-organization.com/petitions/stop-the-bad-thing. This is great for giving your action more branding and helpful for folks who don't want to embed actions on their website. More on custom domains here.
See here for our page wrappers video tutorial.
To manage your page wrappers, choose the Page Wrappers option from the Details tab of the Start Organizing menu. Next, choose the list you'd like to manage page wrappers for, either your individual account's email list or any groups you are an administrator of.
To create a new page wrapper, click the Add New Wrapper button in the upper left.
Enter a name for your wrapper. Then either enter the HTML code for your wrapper head and foot in the boxes below, or use the auto-generate button to upload your logo and choose a few colors and have us create a very simple wrapper for you. You'll be able to select a specific layout so you can control how much of the screen the description and form takes up. The form will always be on the right side.
Next, you can select a header and accent color. The 'header' color is at the top of your page, behind the image you choose. The 'accent' color corresponds to the submit button, any links, the add to calendar links on events and ticketed events, and progress bar. Do not choose white as your accent color, people will not be able to see the submit button.
Note: Auto-generating a wrapper will overwrite your current wrapper. Any customizations you have made will be lost. You can edit your auto-generated wrapper after it's made to customize it further.
If you write your own, you'll see on the page that we split the wrapper into two inputs -- the header and the footer -- with your action's widget inserted in the center.
Remember to write mobile-responsive HTML. You must include some HTML in both the header and footer box.
A few tips to keep in mind:
- We automatically add a title tag to your HTML based on the action pages name, and appropriate social media meta tags based on your sharing options. You can omit those elements when creating your page wrapper. You still need to write <html> and <head> tags yourself.
- Our pages are served from a secure domain with the
httpsprotocol. Any assets you link to (such as images or external stylesheets) should be served fromhttpsdomains. - Our files system is meant for hotlinking in your page wrappers, so feel free to upload files and grab links from the files system.
- Since our page wrappers use our widgets, keep in mind the customization and styling options for widgets. Make sure you take into account the various possible widget states (recognized users, thank you pages, etc...) in your design. Click here for tips on styling your widgets and pages, and click here for tips on widgets and javascript customization.
Our files system can be used for storing images or other files if you'd like for your wrappers. After you upload a file, you'll be able to get a link that you can use here.
When you're done, you can preview your wrapper by clicking the Save & Preview button at the bottom, which will allow you to see how your wrapper will look with our different action page widgets. Click Save on the editing page to save and return to your list of page wrappers.
In the list you can quickly edit and preview any custom wrappers you have made and set a default to be used for your list's action pages. You can always pick a different wrapper for each page, this simply sets the default.
You can also delete wrappers, though note that deleting a wrapper is permanent and cannot be undone. If you don't want to permanently delete a wrapper, you can hide it so it's no longer in view. You'll be able to restore hidden wrappers by hovering over your list of wrappers and clicking the red View Hidden Items link that appears at the bottom right of this list.
You can duplicate wrappers as well with the duplicate button. If your group is in a network, you can optionally duplicate the wrapper to child groups as well, giving you a way to easily share wrappers with children. When you duplicate the wrapper, you'll be asked to enter a new name for the wrapper.
If you have a network and want to share a wrapper with all child groups, you can click the Send button. Note that if you do this, your child groups will not be able to edit the wrapper on their end. However, any changes made in the parent group will automatically apply to the child groups.
To apply a page wrapper to an action, select it from the drop down menu at the top of the tabs on the Action Manage page. You can A/B test your page wrappers by clicking the + button and adding the wrappers you'd like to test. If you do this, we'll randomly split up the wrappers activists see when they view the action so you can see which was most effective.
You'll see a new Test Results tab appear where you can compare the total number of actions and percentage of total actions between the two wrappers. You can then end the test and select a winner which will be the only wrapper activists see moving forward.