TopicsPage

TopicsPage

TopicsPageTopicsPage

Using the IM Marketing Platform

2

TopicsPage

Branding Options1)General2)Integrate3)Mobile URL4)Logo 5)Icons6)Backgrounds7)Custom CSS8)Preview

Modules1)Events2)External Link3)Generic Content4)Locations5)Menus6)Offers/Promotions7)Photo Album8)Reviews9)Sub-Menu10)YouTube Video

Go through the PowerPoint from beginning to end, or click one of the topics below to be taken directly to that section. On the following pages the “ “ button will bring you back to this page.

Topics Covered in this Instruction ManualTopicsPage

Extras1)QR Code2)Hide in Navigation

2

TopicsPage

TopicsPage Creating a Mobile Site

Instructions for: General (Branding Options)

2

45

6

7

8

3

TopicsPage 3

TopicsPage

TopicsPage Changing the Mobile Site URL

1) Go to Mobile URL on the left side navigation

2) Type in your desired Mobile URL – a green check means the name is available

Standard: Custom Domain Name:3) Follow the DNS Instructions closely*Note – If your domain is registered with one provider and hosted with another provider, go to the site of your hosting provider and follow steps 2-4. Your hosting provider may instruct you to submit a help ticket so they can add the CNAME (Alias) record for you.4) Type in the CNAME (Alias) record you created5) Wait 48 hours to confirm that the DNS Record was updated. Sometimes it doesn’t take the full 48 hours, but please wait the entire amount of time before submitting a complaint about the URL not working properly.

1

2

3

4

TYPE YOUR URL HERE /instructionmanual

4

TopicsPage

TopicsPage

Adding a Logo 1) Go to Logo & Icons on the left side navigation. You have two choices to upload a logo

Upload a File From Your Computer2) Choose File3) Upload the File4) Adjust height if needed, width will adjust automatically

Set an Image From the Web5) Copy the URL of the Image you want to use as the logo6) Update the Page

1

2

3 56

4

Instructions for Copying Image URL

5

TopicsPage

TopicsPage

“Set an Image from Web” or copy an “Image URL” ?(We recommend using Picasa to Upload Files. If your photo is already on the internet, Skip to Step 5)

1

2

5

6

7

6

TopicsPage

TopicsPage

Add an iPhone Icon and Favicon* If you enabled “Add to Home Screen” in the General Options, you will need to add an

Apple Touch Icon URL (this also works on Android phones)

1) Create an Apple Touch Icon – can be a miniature version of your logo, will show up like an App on the homescreen

2) Make sure that the size is 114x114 and it is a PNG or JPG file

3) Upload the Icon to the internet (any photo hosting site will do, we recommend Picasa)

4) Copy the URL of the photo and paste it in the Apple Touch Icon URL field *Make sure it is the URL for JUST the photo. Test by pasting the URL into a new browser window and making sure the Icon is the ONLY thing you see.

4

Favicon Examples

5. Create a Favicon –could be the same as your Apple Touch Icon, just a different size (16x16 or 32x32) in the format ICO, GIF, JPG, or PNG.

6. Upload the Favicon (same requirements as Step 3)

7. Copy URL (same requirements as Step 4) and paste into Favicon URL Field

7

Instructions for Copying Image URL

7

TopicsPage

TopicsPage Customize the Background

1) Click Backgrounds on the left side navigationMain Area:

2) Set a solid color by using a HEX Color Code or click the color wheel

3) Set an image as your background by uploading a file from your computer –or–

4) Create an image (GIF, JPEG, or PNG) and upload it to the internet (any photo hosting site will do, we recommend Picasa)

5) Copy the URL of the photo and paste it in the ‘Set image from Web’ field *Make sure it is the URL for JUST the photo. Test by pasting the URL into a new browser window and making sure the image is the ONLY thing you see

1

2

3

5HeaderArea

Background

Instructions for Copying Image URL

8

TopicsPage

TopicsPage Backgrounds: Header Area

1) Generally – Header Area backgrounds match the Logo backgrounds exactly 2) Find the Hex Color Code for your Logo background, (using PhotoShop,

Paint.net, etc) and type it in the Set Color field

*If your Logo is Transparent, or doesn’t need to match the Header Area Background

3) Upload an image to place behind it4) Or use an existing picture on the internet. Copy the URL of the photo and

paste it in the ‘Image URL’ field *Make sure it is the URL for JUST the photo. Test by pasting the URL into a new browser window and making sure the image is the ONLY thing you see

Instructions for Copying Image URL

2

3

4

9

TopicsPage

TopicsPage Other Available Customization1) Using the Custom CSS link on the left navigation, you can edit almost every aspect of your mobile site2) Type these codes into the text box in any order to edit these options3) You can also find other CSS codes by using the Firebug Plugin on a FireFox web browser. Open a

preview of your mobile site and enable Firebug. Select the element you want to edit, and copy the CSS code given by Firebug. It will be the code that looks very similar to those shown below.

21

10

Center the header#iHeader {text-align:center;}

Menu Transparency (shown at 50%).iMenu ul {opacity: .5;}

Menu Background Color (hex)Note: Make sure there is enough contrast between background color and font color.iMenu ul {background-color:#000FFF;}

Menu Font Color (hex)Note: Make sure there is enough contrast between background color and font color.iMenu ul li a,.iMenu li.icon span.a, .iList li.icon span.a{color:#bc9753;}

Menu Background Image and Border Color (hex)Note: Menu background image repeats; you may make the menu background image height > 43, but it will truncate at 43 pixels for main menu items (address bar is taller than 43 pixels).iMenu ul li{background-image:url(<insert URL here>);Border-color:#FFF000;}

TopicsPage

TopicsPage

Other Customization: Icons• Every module has the option to add an Icon1) Click on the blue “Choose” button2) Select your icon from the box• If you need customized icons, send us the picture

and we will upload it to the icon section for you!

1

2 Flashing icons to grab attention

White icons for colored backgrounds

11

TopicsPage

TopicsPage

Live Demo of Mobile Site

1. Click “Preview” on the left side navigation

2. A simulator will open in a new window showing what your site looks like on a mobile phone

3. To experience all of the features of your mobile site on a desktop site, copy the URL from the simulator window and paste it in a new window. Change the “True” at the end of the URL to “False”

4. Of course, the best way to preview your site is to type the Mobile URL you created into your own phone’s browser and actually visit the website!

12

Absolutely! We recommend previewing often

12

TopicsPage

TopicsPage

1. From the main screen, click +Add a New Item2. You will see a list of all the modules3. Pointing to the arrow at the end of the module bars gives a brief description of what that module

can be used for (These are just suggestions though, get creative – it’s your site!)

Add Modules to Mobile Site

1

2

3

13

TopicsPage

TopicsPage Module: Events

2

3

4

5

6

7

8

Events Continued

14

TopicsPage

TopicsPage Module: Events (Continued)

• The demo event is “Tuesday Night Yoga Class!” so the event needs to be listed every Tuesday night

1) Select the Repeats drop down menu (default is Does not repeat)2) Select how often your event will repeat (Weekly for this demo)3) Select the date your event will End4) Check the box of the day the event will repeat5) Enter a description for the event, ie: Instructor Julie will be teaching this class

1

2 3

4

5

15

TopicsPage

TopicsPage

Module: External Link1) Always start with +Add a New Item on the home screen2) Select External Link3) Type the text that you want to appear on the bar4) Type the URL the text will link to (including “http://”)5) Test the link to make sure it works6) Decide if you want the link to open a new window *This step is

personal preference, some mobile users like new windows and some don’t. Figure out what Your Clients like and do that.

7) You can link to websites, phone numbers (click-to-call), e-mail addresses, and text messages

1

2

3

45

67

16

TopicsPage

TopicsPage

Social Media Icons• Use an External Link to connect to Social Media, or insert pictures of Icons and link them to your social media site

17

1

2

3

4

56

7

TopicsPage

TopicsPage Module: Generic Content

The most versatile Module – can be used for anything you need!The most versatile Module – can be used for anything you need!

1

2

34

5 6

7

8

9 1315

10

11 12 14

18

TopicsPage

TopicsPage Module: Locations

Locations Continued

2

3

4

5

6

7

8

19

TopicsPage

TopicsPage Module: Locations (Continued)

1) Intersection and Hours are optional fields, they can also be used for other information, ie: Services Offered at this Location.

2) Text in the Intersection field shows up in parentheses3) Latitude and Longitude fields only need to be typed in manually if

Google Maps cannot place your location correctly4) Add your e-mail address so customers who have e-mail on their

mobile device can send you a message with one click5) Enter a description of this location, it will show up underneath the

phone number and e-mail address on the mobile site

1

2

3

4

5

20

TopicsPage

TopicsPage

“Find Near Me” Button and Search by City, State, or ZIP Code

• If you enter 25 locations or more, the Find Near Me feature will automatically show up on your mobile site

• If you have less than 25 locations but would still like to have this feature, just e-mail us and we will get it set up for you!

21

TopicsPage

TopicsPage Module: Menus

Menu without

Excel File

2

3

4

6

22

TopicsPage

TopicsPage Module: Menus (Add Menu & Category)

1

2

3

4

7

6

8

9

23

TopicsPage

TopicsPage Module: Menus (Add Menu Items)

1

2

3

4

5

6

7

8

24

TopicsPage

TopicsPage Module: Offers/Promotions

1

2

3

4

5

6

7

8 9

25

TopicsPage

TopicsPage Module: Photo Album

2

3

4

5

7

8

Instructions for Copying Image URL

26

TopicsPage

TopicsPage Module: Reviews

1) Click on +Add a New Item on the home screen2) Select Reviews3) Type the text that you want to appear on the bar4) Click Add Reviews to add the module to your mobile

site5) Click the +Add a New Review to pick a review website6) Select a review website from the drop down menu7) Or add your own review site by clicking +Add Other8) Type the URL for the review site of Your Business in the

Review URL field

*Note that some review sites are not mobile-friendly, a better option may be copying reviews from your review website and pasting them into a Generic Content module

2

3

4

5

6

78

27

TopicsPage

TopicsPage Module: Sub-Menu

The Sub-Menu module helps organize your mobile site. All modules are included in Sub-Menu navigation

3

4

5

6

27

Sub-MenuExample

28

TopicsPage

TopicsPage Sub-Menu Example

You need an About Us section, but you want to have different pages for the Chef and the Staff

1

2

3

4

5

6

7

8MoreSteps

9

29

TopicsPage

TopicsPage Sub-Menu Example (Continued)

2

3

4

5

1

Now Preview Your Site

30

TopicsPage

TopicsPage Sub-Menu Example Preview1) When you look at your mobile site, you will only see the bar “About Us”2) Preview your mobile site to experience the Sub-Menu3) On the main page, you only see “About Us”4) When you click on “About Us” you will be taken to the Sub-Menu where you can find

“About the Chef” and “About the Staff” 1

2

3 4

31

TopicsPage

TopicsPage

Module: YouTube Video1) Click on +Add a New Item on the home screen2) Select YouTube Video3) Type the text that you want to appear on the bar4) Get the embed code from the video on YouTube.com5) Paste the code into the Embed Code field6) Add your video

How to get the Embed Code

2

3

5

6

32

TopicsPage

TopicsPage Embed Video Code from YouTube.com1) Go to YouTube.com and find your video2) Click on Share underneath the video3) Click on Embed underneath the video link4) Decide which options you want to include

(We recommend not showing suggested videos - keep your customers focused on your video)

5) Copy your code and paste it into the Embed Code field on your mobile site

2

3

4

5

33

TopicsPage

TopicsPage

Extras: QR Code

1) From the Main Screen, select Get QR Code

2) A code will be generated that directs to your mobile site’s home page

3) Use the bar along the bottom to size the QR Code

4) Download it as a PNG file5) Use in your Marketing

and Advertising to drive traffic to your Mobile Site!

Uses for QR Codes: Flyers – Business Card – Receipts – Print Ads & Mailings – Signs – Store Windows - Displays

1

2

3

4

34

TopicsPage

TopicsPage Extras: Hide in Navigation• All modules have the ability to be “tested” before being seen by the public1) In any module, select the “Hide in Navigation” box2) You will see your Module in the menu list3) But not on the site when you Preview it 1

23

* “Hide in Navigation” will be expanded to include more features soon!

35

TopicsPage

TopicsPage

How do I add Mobile Device Redirection?

*Do this step once your mobile site is finished! After this Last Step, your site will be completely live and accessible on the mobile web

When your mobile site is completed, follow these steps to add a redirection script to your desktop site.1)Go to Integrate on the left side navigation2)Scroll down until you see the type of website you have, HTML/JavaScript, ASP, ASP.NET, PHP (If you are unsure, use HMTL/JavaScript)3)Copy the Entire code in the box you have selected4)Paste the code where the instructions say to, ie: if you picked HMTL/JavaScript it will be “Inside the <head> </head> tag of your website’s home page file (ex: index.html). That’s it!

1

2

3

TopicsPage 36

TopicsPage

TopicsPage Deleting a Mobile Site

• This is a hidden feature on purpose – no one wants to accidentally delete all of their hard work

1) Choose General on the left side navigation2) Click on Settings on the top navigation3) Click Delete Mobile Site4) Select OK when the prompt asks if you are sure

1

2

3

4

One last chance to change your mind - Make absolutely certain you do not want your mobile site before deleting it!

37

TopicsPage

TopicsPage Index 38

• Branding Options– Backgrounds

• Main Area…………………………………. 8• Header Area……………………………… 9

– Custom CSS• Other Customization…………………. 10• “Set Image from Web”………………. 6

– General• Creating a Mobile Site……………….. 3

– Integrate• Mobile Detection/Redirection……. 36

– Logo & Icons• Add Logo……………………………………. 5• Add iPhone Icon & Favicon…………. 7• Add Icon to Menu List………………… 11

– Mobile URL………………………………….. 4– Preview

• Live Demo of Mobile Site……………. 12• Contact Us………………………………….

37• Extras

– Delete Mobile Site……………………….. 38– Hide in Navigation

• Test modules privately………………… 35– QR Codes……………………………………… 34

• Modules……………………………………. 13– Events

• Add Calendar of Events……………… 14• Recurring Events………………………… 15

– External Link……………………………….. 16• Social Media Accounts……………….. 17

– Generic Content• Blank Page …………………………………. 18

– Locations• Add Locations…………………………….. 19• Intersection/Hours/Description…. 20• GPS & “Find Near Me”……………….. 21

– Menus• With Excel File……………………………. 22• Add Menu Manually…………………… 23• Adding Menu Items……………………. 24

– Offers / Promotions• Add Coupons / Specials………………. 25

– Photo Album• Add Pictures / Gallery…………………. 26

– Reviews• Link to Yelp!/Other review site……. 27

– Sub-Menu• Organize Mobile Site…………………… 28• Sub-Menu Example…………………….. 29

– YouTube Video• Watch Video on Mobile Site………… 32• Get Embed Code from YouTube…… 33