Instruction manual im

Using the IM Marketing Platform 2 Topics Page Topics Page

Branding Options General Integrate Mobile URL Logo Icons Backgrounds Custom CSS Preview Modules Events External Link Generic Content Locations Menus Offers/Promotions Photo Album Reviews Sub-Menu 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 Manual Topics Page Extras QR Code Hide in Navigation

Creating a Mobile Site Instructions for: General (Branding Options) 2 4 5 6 7 8 3 Topics Page

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 created 5) 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

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 Computer 2) Choose File 3) Upload the File 4) Adjust height if needed, width will adjust automatically Set an Image From the Web 5) Copy the URL of the Image you want to use as the logo 6) Update the Page 1 2 3 5 6 4 Instructions for Copying Image URL

“ 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

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) Create an Apple Touch Icon – can be a miniature version of your logo, will show up like an App on the homescreen Make sure that the size is 114x114 and it is a PNG or JPG file Upload the Icon to the internet (any photo hosting site will do, we recommend Picasa) 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 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. Upload the Favicon (same requirements as Step 3) Copy URL (same requirements as Step 4) and paste into Favicon URL Field 7 Instructions for Copying Image URL

Customize the Background Click Backgrounds on the left side navigation Main Area: Set a solid color by using a HEX Color Code or click the color wheel Set an image as your background by uploading a file from your computer –or– Create an image (GIF, JPEG, or PNG) and upload it to the internet (any photo hosting site will do, we recommend Picasa) 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 5 Header Area Background Instructions for Copying Image URL

Backgrounds: Header Area Generally – Header Area backgrounds match the Logo backgrounds exactly 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 Upload an image to place behind it 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

Other Available Customization Using the Custom CSS link on the left navigation, you can edit almost every aspect of your mobile site Type these codes into the text box in any order to edit these options 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. 2 1 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;}

Other Customization: Icons Every module has the option to add an Icon Click on the blue “Choose” button 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

Live Demo of Mobile Site Click “Preview” on the left side navigation A simulator will open in a new window showing what your site looks like on a mobile phone 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” 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! 1 2 Absolutely! We recommend previewing often

From the main screen, click +Add a New Item You will see a list of all the modules 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

Module: Events 2 3 4 5 6 7 8 Events Continued

Module: Events (Continued) The demo event is “Tuesday Night Yoga Class!” so the event needs to be listed every Tuesday night Select the Repeats drop down menu (default is Does not repeat) Select how often your event will repeat (Weekly for this demo) Select the date your event will End Check the box of the day the event will repeat Enter a description for the event, ie: Instructor Julie will be teaching this class 1 2 3 4 5

Module: External Link Always start with +Add a New Item on the home screen Select External Link Type the text that you want to appear on the bar Type the URL the text will link to (including “http://”) Test the link to make sure it works 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. You can link to websites, phone numbers (click-to-call), e-mail addresses, and text messages 1 2 3 4 5 6 7

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 1 2 3 4 5 6 7

Module: Generic Content The most versatile Module – can be used for anything you need! 1 2 3 4 5 6 7 8 9 13 15 10 11 12 14

Module: Locations Locations Continued 2 3 4 5 6 7 8

Module: Locations (Continued) Intersection and Hours are optional fields, they can also be used for other information, ie: Services Offered at this Location. Text in the Intersection field shows up in parentheses Latitude and Longitude fields only need to be typed in manually if Google Maps cannot place your location correctly Add your e-mail address so customers who have e-mail on their mobile device can send you a message with one click 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

“ 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!

Module: Menus Menu without Excel File 2 3 4 6

Module: Menus (Add Menu & Category) 1 2 3 4 7 6 8 9

Module: Menus (Add Menu Items) 1 2 3 4 5 6 7 8

Module: Offers/Promotions 1 2 3 4 5 6 7 8 9

Module: Photo Album 2 3 4 5 7 8 Instructions for Copying Image URL

Module: Reviews Click on +Add a New Item on the home screen Select Reviews Type the text that you want to appear on the bar Click Add Reviews to add the module to your mobile site Click the +Add a New Review to pick a review website Select a review website from the drop down menu Or add your own review site by clicking +Add Other 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 7 8

Module: Sub-Menu The Sub-Menu module helps organize your mobile site. All modules are included in Sub-Menu navigation 3 4 5 6 2 7 Sub-Menu Example

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 8 More Steps 9

Sub-Menu Example (Continued) 2 3 4 5 1 Now Preview Your Site

Sub-Menu Example Preview When you look at your mobile site, you will only see the bar “About Us” Preview your mobile site to experience the Sub-Menu On the main page, you only see “About Us” 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

Module: YouTube Video Click on +Add a New Item on the home screen Select YouTube Video Type the text that you want to appear on the bar Get the embed code from the video on YouTube.com Paste the code into the Embed Code field Add your video How to get the Embed Code 2 3 5 6

Embed Video Code from YouTube.com Go to YouTube.com and find your video Click on Share underneath the video Click on Embed underneath the video link Decide which options you want to include (We recommend not showing suggested videos - keep your customers focused on your video) Copy your code and paste it into the Embed Code field on your mobile site 2 3 4 5

Extras: QR Code From the Main Screen, select Get QR Code A code will be generated that directs to your mobile site’s home page Use the bar along the bottom to size the QR Code Download it as a PNG file 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

Extras: Hide in Navigation All modules have the ability to be “tested” before being seen by the public In any module, select the “Hide in Navigation” box You will see your Module in the menu list But not on the site when you Preview it 1 2 3 * “Hide in Navigation” will be expanded to include more features soon!

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. Go to Integrate on the left side navigation Scroll down until you see the type of website you have, HTML/JavaScript, ASP, ASP.NET, PHP (If you are unsure, use HMTL/JavaScript ) Copy the Entire code in the box you have selected 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 Topics Page

Deleting a Mobile Site This is a hidden feature on purpose – no one wants to accidentally delete all of their hard work Choose General on the left side navigation Click on Settings on the top navigation Click Delete Mobile Site 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!

Index 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

Instruction manual im

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Instruction manual im (20)

Recently uploaded (20)

Instruction manual im