Page 1 of 18

Manual

Page 2 of 18

1 Table of Contents 2 Install PageHat Plugin .......................................................................................................................... 3

3 Design Your PageHat ........................................................................................................................... 6

3.1 Select Your PageHat .................................................................................................................... 6

3.2 Edit Your Template Design .......................................................................................................... 7

3.2.1 PageHat Solid Background .................................................................................................. 7

3.2.2 PageHat Picture Background .............................................................................................. 8

3.2.3 PageHat Moving Background ............................................................................................. 8

3.2.4 PageHat Special Offer Picture/Video .................................................................................. 9

3.2.5 PageHat Headlines & Text Items......................................................................................... 9

3.2.6 PageHat CTA Button & Links Items ................................................................................... 10

3.2.7 PageHat Opt Out Options.................................................................................................. 10

3.2.8 Saving Your PageHat Template ......................................................................................... 10

4 Activating Your PageHat .................................................................................................................... 11

5 Install Your Autoresponder ................................................................................................................ 13

5.1 Aweber ........................................................................................................................................ 13

5.2 Mailchimp .................................................................................................................................... 13

5.3 GetResponse ............................................................................................................................... 15

5.4 iContact ...................................................................................................................................... 16

6 A/B Testing .......................................................................................................................................... 17

7 Export & Import Your PageHats ....................................................................................................... 18

7.1 Exporting Your Template .......................................................................................................... 18

7.2 Importing Your Template .......................................................................................................... 18

Page 3 of 18

2 Install PageHat Plugin Download the Pagehat Plugin from the landing page and go to your Wordpress Dashboard and

select [Plugins]

Click the button [Add New]

Click the button [Upload Plugin]

Choose the file pagehat.zip that you have downloaded and click [Install Now]!

Wordpress will start uploading the plugin and show the following screen when uploaded:

Page 4 of 18

Please click “Activate Plugin”

The PageHat Menu will now appear on your dashboard. Please click on this menu item and select

[Settings]

Page 5 of 18

Make sure you type the following into the settings page:

57a2e7051d0950.61902680

http://www.pagehat.io/

Then click [Save]

Then select License in the PageHat Menu.

Fill in your License Key and the domain that you just installed PageHat on. Click [Save] and the

following text should appear:

Your license key 5760537f0c9ae

Your license key is valid.

You are now ready use PageHat!

Page 6 of 18

3 Design Your PageHat Select the [Design] tab

3.1 Select Your PageHat Select the template you want to use by clicking the dropdown menu on the Template

For example, the Special Offer Template, which has most of the features.

Page 7 of 18

3.2 Edit Your Template Design Once you have selected your template, you can start your design

3.2.1 PageHat Solid Background You can select a solid background by selecting a color by clicking the box behind the color tag. Select

your color by clicking on the color pallet or typing your color html code.

Page 8 of 18

3.2.2 PageHat Picture Background You can also choose to select a picture background by clicking on the box next to the Background

tag

Select your picture and click [Open]

3.2.3 PageHat Moving Background You can also choose to select a moving background by clicking on the box next to the Background

tag

Select your Moving Background and click [Open]

Page 9 of 18

3.2.4 PageHat Special Offer Picture/Video To show your special of as a picture, please select the black box behind the picture tag.

Select your picture and click [Open].

To show your special of as a YouTube Video, please select the URL Link of your YouTube Video, like

you see below and copy the link.

Paste this link next to the tag “Video url”

3.2.5 PageHat Headlines & Text Items You can change any headline and text item by selecting the text fields.

Simply type your custom text, select your color and font.

Page 10 of 18

3.2.6 PageHat CTA Button & Links Items You can change the Call-to-Action button text by selecting the button text and type your own words.

The color of the text and button can be changed by clicking the boxes behind BG (background

button) or color (text color). Simply click the dropdown menu to change the font

The link that the button can activate can be entered under the item “Opt-in button link”

3.2.7 PageHat Opt Out Options PageHats have 2 opt out options, a text link and a scroll down button. Both text and button can be

changed.

Simply change the text and text color by selecting the specific boxes. To change the scroll down

button you can upload any image you would like.

3.2.8 Saving Your PageHat Template You can save your template by clicking “Save” or “Save As”. With “Save As” you can type your own

title.

Type your desired Template Name and click “Save

template”. Wait a couple of seconds to let the

system upload the selected images and

backgrounds. The Page will automatically be

refreshed after which you can select your template under “Saved Templates”

Page 11 of 18

4 Activating Your PageHat To activate your pagehat, select the Setting tab on the PageHat Menu

Turn the PageHat Plugin on with the sliding button

Then choose the pagehat template you would like to use.

You can then select on which pages you would like to show the PageHat.

Page 12 of 18

You can select all pages or selected pages or posts. If you want to select only a couple of pages, you

can click the sign.

To select how long the visitor will see the pagehat again, you can choose the timeframe in the

dropdown menu.

Click save and your PageHat will now show on your selected pages.

Page 13 of 18

5 Install Your Autoresponder Select your favorite autoresponder and follow the instructions below:

5.1 Aweber Log into Aweber and create a new list or select an existing list.

Click on the menu item [Sign Up Forms] and create or select a Sign Up Form. You will now follow a 3

step creation sequence. You can leave the standard form as is and click on [Go To Step 2]. Select

your basic settings and click [Save Your Form] and then click on [Go To Step 2]. Select [I Will Install

My Form], click on [Raw HTML Version] and select the script in the contents box, like you see below.

Copy the script and go back to the PageHat Plugin [Autoresponder] Menu. Select Aweber, paste the

code into the code box and click [Save]. You have now installed Aweber as your autoresponder.

5.2 Mailchimp Log into Mailchimp and create a new list or select an existing list.

Once your list is created, Click on the menu item [Signup Forms] and create or select a Sign Up Form.

You will now follow a 3 step creation sequence. Then select [Embedded Forms] and then select

[Super Slim]. Now copy the code from the “Copy/past onto your site” content box like you see

below.

Page 14 of 18

Copy the script and go back to the PageHat Plugin [Autoresponder] Menu. Select Mailchimp, paste

the code into the code box and click [Save]. You have now installed Mailchimp as your

autoresponder.

Page 15 of 18

5.3 GetResponse Log into Getresponse and go to create a Webform here:

https://app.getresponse.com/webform_create.html

Click on [Plain HTML] and select the code in the “Copy and paste onto your site” Box like shown

below.

Copy the script and go back to the PageHat Plugin [Autoresponder] Menu. Select GetResponse,

paste the code into the code box and click [Save].

Follow these instructions to install the GetResponse Integration Plugin (only the first 2 minutes until

API Key is installed): https://support.getresponse.com/videos/install-getresponse-plug-within-

wordpress. You have now installed GetResponse as your autoresponder.

Page 16 of 18

5.4 iContact Log into iContact and click on the Menu [Contacts], then select [Sign-up Forms]. Create a Sign-up

Form or select an existing form. Then Select the Menu [Code View] and select the code in the “HTML

Output” Box like shown below.

Copy the script and go back to the PageHat Plugin [Autoresponder] Menu. Select GetResponse,

paste the code into the code box and click [Save].

Follow these instructions to install the GetResponse Integration Plugin (only the first 2 minutes until

API Key is installed): https://support.getresponse.com/videos/install-getresponse-plug-within-

wordpress. You have now installed GetResponse as your autoresponder.

Page 17 of 18

6 A/B Testing You can test your PageHat Templates by using our A/B Testing Menu.

By selecting you 2 templates you would like to test, click the drop down menu to select your

templates.

Once you have selected your 2 templates. You can turn on the testing.

Now PageHat will show the Design A 50% of the time and Design B 50% of the time. You can check

the effectiveness of your design later in this menu.

Page 18 of 18

7 Export & Import Your PageHats In case you want to share your template with someone or you want to use it on another domain. You

can simply export and import your PageHats with the export/Import Menu.

7.1 Exporting Your Template To export your template, click the dropdown menu

Select the template you’ld like to export and click export.

You Template will now be downloaded.

7.2 Importing Your Template To Import a template, just click browse or drag the downloaded file within the import window.

Click import and your template will now be uploaded and you can now select this PageHat on your

domain.