Using the IM Marketing Platform 2 Topics Page Topics Page
<ul><li>Branding Options </li></ul><ul><li>General </li></ul><ul><li>Integrate </li></ul><ul><li>Mobile URL </li></ul><ul>...
Creating a Mobile Site Instructions for: General (Branding Options) 2 4 5 6 7 8 3 Topics Page
Changing the Mobile Site URL <ul><li>1) Go to Mobile URL on the left side navigation </li></ul><ul><li>2) Type in your des...
Adding a Logo  <ul><li>1) Go to Logo & Icons on the left side navigation. You have two choices to upload a logo </li></ul>...
“ Set an Image from Web” or copy an “Image URL” ? (We recommend using Picasa to Upload Files. If your photo is already on ...
Add an iPhone Icon and Favicon <ul><li>* If you enabled “Add to Home Screen” in the  General Options , you will need to ad...
Customize the Background <ul><li>Click Backgrounds on the left side navigation Main Area: </li></ul><ul><li>Set a solid co...
Backgrounds: Header Area <ul><li>Generally – Header Area backgrounds match the Logo backgrounds exactly  </li></ul><ul><li...
Other Available Customization <ul><li>Using the Custom CSS link on the left navigation, you can edit almost every aspect o...
Other Customization: Icons <ul><li>Every module has the option to add an Icon </li></ul><ul><li>Click on the blue “Choose”...
Live Demo of Mobile Site <ul><li>Click “Preview” on the left side navigation </li></ul><ul><li>A simulator will open in a ...
<ul><li>From the main screen, click +Add a New Item </li></ul><ul><li>You will see a list of all the modules </li></ul><ul...
Module: Events 2 3 4 5 6 7 8 Events Continued
Module: Events (Continued) <ul><li>The demo event is “Tuesday Night Yoga Class!” so the event needs to be listed every Tue...
Module: External Link <ul><li>Always start with +Add a New Item on the home screen </li></ul><ul><li>Select External Link ...
Social Media Icons <ul><li>Use an  External Link  to connect to Social Media, or insert pictures of Icons and link them to...
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) <ul><li>Intersection and Hours are optional fields, they can also be used for other informat...
“ Find Near Me” Button  and Search by City, State, or ZIP Code <ul><li>If you enter 25 locations or more, the Find Near Me...
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 <ul><li>Click on +Add a New Item on the home screen </li></ul><ul><li>Select Reviews </li></ul><ul><li>Typ...
Module: Sub-Menu The Sub-Menu module helps organize your mobile site. All modules are included in Sub-Menu navigation 3 4 ...
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...
Sub-Menu Example (Continued) 2 3 4 5 1 Now Preview Your Site
Sub-Menu Example Preview <ul><li>When you look at your mobile site, you will only see the bar “About Us” </li></ul><ul><li...
Module: YouTube Video <ul><li>Click on +Add a New Item on the home screen </li></ul><ul><li>Select YouTube Video </li></ul...
Embed Video Code from YouTube.com <ul><li>Go to YouTube.com and find your video </li></ul><ul><li>Click on Share underneat...
Extras: QR Code <ul><li>From the Main Screen, select Get QR Code </li></ul><ul><li>A code will be generated that directs t...
Extras: Hide in Navigation <ul><li>All modules have the ability to be “tested” before being seen by the public </li></ul><...
How do I add Mobile Device Redirection? <ul><li>*Do this step once your mobile site is finished!   After this Last Step, y...
Deleting a Mobile Site <ul><li>This is a hidden feature on purpose – no one wants to accidentally delete all of their hard...
Index <ul><li>Branding Options </li></ul><ul><ul><li>Backgrounds </li></ul></ul><ul><ul><ul><li>Main Area…………………………………. 8 ...
Upcoming SlideShare
Loading in …5
×

Instruction manual im

1,061 views
992 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,061
On SlideShare
0
From Embeds
0
Number of Embeds
59
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Instruction manual im

  1. 1. Using the IM Marketing Platform 2 Topics Page Topics Page
  2. 2. <ul><li>Branding Options </li></ul><ul><li>General </li></ul><ul><li>Integrate </li></ul><ul><li>Mobile URL </li></ul><ul><li>Logo </li></ul><ul><li>Icons </li></ul><ul><li>Backgrounds </li></ul><ul><li>Custom CSS </li></ul><ul><li>Preview </li></ul><ul><li>Modules </li></ul><ul><li>Events </li></ul><ul><li>External Link </li></ul><ul><li>Generic Content </li></ul><ul><li>Locations </li></ul><ul><li>Menus </li></ul><ul><li>Offers/Promotions </li></ul><ul><li>Photo Album </li></ul><ul><li>Reviews </li></ul><ul><li>Sub-Menu </li></ul><ul><li>YouTube Video </li></ul>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 <ul><li>Extras </li></ul><ul><li>QR Code </li></ul><ul><li>Hide in Navigation </li></ul>
  3. 3. Creating a Mobile Site Instructions for: General (Branding Options) 2 4 5 6 7 8 3 Topics Page
  4. 4. Changing the Mobile Site URL <ul><li>1) Go to Mobile URL on the left side navigation </li></ul><ul><li>2) Type in your desired Mobile URL – a green check means the name is available </li></ul>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
  5. 5. Adding a Logo <ul><li>1) Go to Logo & Icons on the left side navigation. You have two choices to upload a logo </li></ul>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
  6. 6. “ 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
  7. 7. Add an iPhone Icon and Favicon <ul><li>* 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) </li></ul><ul><li>Create an Apple Touch Icon – can be a miniature version of your logo, will show up like an App on the homescreen </li></ul><ul><li>Make sure that the size is 114x114 and it is a PNG or JPG file </li></ul><ul><li>Upload the Icon to the internet (any photo hosting site will do, we recommend Picasa) </li></ul><ul><li>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. </li></ul>4 Favicon Examples <ul><li>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. </li></ul><ul><li>Upload the Favicon (same requirements as Step 3) </li></ul><ul><li>Copy URL (same requirements as Step 4) and paste into Favicon URL Field </li></ul>7 Instructions for Copying Image URL
  8. 8. Customize the Background <ul><li>Click Backgrounds on the left side navigation Main Area: </li></ul><ul><li>Set a solid color by using a HEX Color Code or click the color wheel </li></ul><ul><li>Set an image as your background by uploading a file from your computer –or– </li></ul><ul><li>Create an image (GIF, JPEG, or PNG) and upload it to the internet (any photo hosting site will do, we recommend Picasa) </li></ul><ul><li>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 </li></ul>1 2 3 5 Header Area Background Instructions for Copying Image URL
  9. 9. Backgrounds: Header Area <ul><li>Generally – Header Area backgrounds match the Logo backgrounds exactly </li></ul><ul><li>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 </li></ul><ul><li>Upload an image to place behind it </li></ul><ul><li>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 </li></ul>Instructions for Copying Image URL 2 3 4
  10. 10. Other Available Customization <ul><li>Using the Custom CSS link on the left navigation, you can edit almost every aspect of your mobile site </li></ul><ul><li>Type these codes into the text box in any order to edit these options </li></ul><ul><li>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. </li></ul>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;}
  11. 11. Other Customization: Icons <ul><li>Every module has the option to add an Icon </li></ul><ul><li>Click on the blue “Choose” button </li></ul><ul><li>Select your icon from the box </li></ul><ul><li>If you need customized icons, send us the picture and we will upload it to the icon section for you! </li></ul>1 2 Flashing icons to grab attention White icons for colored backgrounds
  12. 12. Live Demo of Mobile Site <ul><li>Click “Preview” on the left side navigation </li></ul><ul><li>A simulator will open in a new window showing what your site looks like on a mobile phone </li></ul><ul><li>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” </li></ul><ul><li>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! </li></ul>1 2 Absolutely! We recommend previewing often
  13. 13. <ul><li>From the main screen, click +Add a New Item </li></ul><ul><li>You will see a list of all the modules </li></ul><ul><li>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!) </li></ul>Add Modules to Mobile Site 1 2 3
  14. 14. Module: Events 2 3 4 5 6 7 8 Events Continued
  15. 15. Module: Events (Continued) <ul><li>The demo event is “Tuesday Night Yoga Class!” so the event needs to be listed every Tuesday night </li></ul><ul><li>Select the Repeats drop down menu (default is Does not repeat) </li></ul><ul><li>Select how often your event will repeat (Weekly for this demo) </li></ul><ul><li>Select the date your event will End </li></ul><ul><li>Check the box of the day the event will repeat </li></ul><ul><li>Enter a description for the event, ie: Instructor Julie will be teaching this class </li></ul>1 2 3 4 5
  16. 16. Module: External Link <ul><li>Always start with +Add a New Item on the home screen </li></ul><ul><li>Select External Link </li></ul><ul><li>Type the text that you want to appear on the bar </li></ul><ul><li>Type the URL the text will link to (including “http://”) </li></ul><ul><li>Test the link to make sure it works </li></ul><ul><li>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. </li></ul><ul><li>You can link to websites, phone numbers (click-to-call), e-mail addresses, and text messages </li></ul>1 2 3 4 5 6 7
  17. 17. Social Media Icons <ul><li>Use an External Link to connect to Social Media, or insert pictures of Icons and link them to your social media site </li></ul>1 2 3 4 5 6 7
  18. 18. 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
  19. 19. Module: Locations Locations Continued 2 3 4 5 6 7 8
  20. 20. Module: Locations (Continued) <ul><li>Intersection and Hours are optional fields, they can also be used for other information, ie: Services Offered at this Location. </li></ul><ul><li>Text in the Intersection field shows up in parentheses </li></ul><ul><li>Latitude and Longitude fields only need to be typed in manually if Google Maps cannot place your location correctly </li></ul><ul><li>Add your e-mail address so customers who have e-mail on their mobile device can send you a message with one click </li></ul><ul><li>Enter a description of this location, it will show up underneath the phone number and e-mail address on the mobile site </li></ul>1 2 3 4 5
  21. 21. “ Find Near Me” Button and Search by City, State, or ZIP Code <ul><li>If you enter 25 locations or more, the Find Near Me feature will automatically show up on your mobile site </li></ul><ul><li>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! </li></ul>
  22. 22. Module: Menus Menu without Excel File 2 3 4 6
  23. 23. Module: Menus (Add Menu & Category) 1 2 3 4 7 6 8 9
  24. 24. Module: Menus (Add Menu Items) 1 2 3 4 5 6 7 8
  25. 25. Module: Offers/Promotions 1 2 3 4 5 6 7 8 9
  26. 26. Module: Photo Album 2 3 4 5 7 8 Instructions for Copying Image URL
  27. 27. Module: Reviews <ul><li>Click on +Add a New Item on the home screen </li></ul><ul><li>Select Reviews </li></ul><ul><li>Type the text that you want to appear on the bar </li></ul><ul><li>Click Add Reviews to add the module to your mobile site </li></ul><ul><li>Click the +Add a New Review to pick a review website </li></ul><ul><li>Select a review website from the drop down menu </li></ul><ul><li>Or add your own review site by clicking +Add Other </li></ul><ul><li>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 </li></ul>2 3 4 5 6 7 8
  28. 28. 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
  29. 29. 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
  30. 30. Sub-Menu Example (Continued) 2 3 4 5 1 Now Preview Your Site
  31. 31. Sub-Menu Example Preview <ul><li>When you look at your mobile site, you will only see the bar “About Us” </li></ul><ul><li>Preview your mobile site to experience the Sub-Menu </li></ul><ul><li>On the main page, you only see “About Us” </li></ul><ul><li>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” </li></ul>1 2 3 4
  32. 32. Module: YouTube Video <ul><li>Click on +Add a New Item on the home screen </li></ul><ul><li>Select YouTube Video </li></ul><ul><li>Type the text that you want to appear on the bar </li></ul><ul><li>Get the embed code from the video on YouTube.com </li></ul><ul><li>Paste the code into the Embed Code field </li></ul><ul><li>Add your video </li></ul>How to get the Embed Code 2 3 5 6
  33. 33. Embed Video Code from YouTube.com <ul><li>Go to YouTube.com and find your video </li></ul><ul><li>Click on Share underneath the video </li></ul><ul><li>Click on Embed underneath the video link </li></ul><ul><li>Decide which options you want to include (We recommend not showing suggested videos - keep your customers focused on your video) </li></ul><ul><li>Copy your code and paste it into the Embed Code field on your mobile site </li></ul>2 3 4 5
  34. 34. Extras: QR Code <ul><li>From the Main Screen, select Get QR Code </li></ul><ul><li>A code will be generated that directs to your mobile site’s home page </li></ul><ul><li>Use the bar along the bottom to size the QR Code </li></ul><ul><li>Download it as a PNG file </li></ul><ul><li>Use in your Marketing and Advertising to drive traffic to your Mobile Site! </li></ul>Uses for QR Codes: Flyers – Business Card – Receipts – Print Ads & Mailings – Signs – Store Windows - Displays 1 2 3 4
  35. 35. Extras: Hide in Navigation <ul><li>All modules have the ability to be “tested” before being seen by the public </li></ul><ul><li>In any module, select the “Hide in Navigation” box </li></ul><ul><li>You will see your Module in the menu list </li></ul><ul><li>But not on the site when you Preview it </li></ul>1 2 3 * “Hide in Navigation” will be expanded to include more features soon!
  36. 36. How do I add Mobile Device Redirection? <ul><li>*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 </li></ul><ul><li>When your mobile site is completed , follow these steps to add a redirection script to your desktop site. </li></ul><ul><li>Go to Integrate on the left side navigation </li></ul><ul><li>Scroll down until you see the type of website you have, HTML/JavaScript, ASP, ASP.NET, PHP (If you are unsure, use HMTL/JavaScript ) </li></ul><ul><li>Copy the Entire code in the box you have selected </li></ul><ul><li>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! </li></ul>1 2 3 Topics Page
  37. 37. Deleting a Mobile Site <ul><li>This is a hidden feature on purpose – no one wants to accidentally delete all of their hard work </li></ul><ul><li>Choose General on the left side navigation </li></ul><ul><li>Click on Settings on the top navigation </li></ul><ul><li>Click Delete Mobile Site </li></ul><ul><li>Select OK when the prompt asks if you are sure </li></ul>1 2 3 4 One last chance to change your mind - Make absolutely certain you do not want your mobile site before deleting it!
  38. 38. Index <ul><li>Branding Options </li></ul><ul><ul><li>Backgrounds </li></ul></ul><ul><ul><ul><li>Main Area…………………………………. 8 </li></ul></ul></ul><ul><ul><ul><li>Header Area……………………………… 9 </li></ul></ul></ul><ul><ul><li>Custom CSS </li></ul></ul><ul><ul><ul><li>Other Customization…………………. 10 </li></ul></ul></ul><ul><ul><ul><li>“ Set Image from Web”………………. 6 </li></ul></ul></ul><ul><ul><li>General </li></ul></ul><ul><ul><ul><li>Creating a Mobile Site……………….. 3 </li></ul></ul></ul><ul><ul><li>Integrate </li></ul></ul><ul><ul><ul><li>Mobile Detection/Redirection……. 36 </li></ul></ul></ul><ul><ul><li>Logo & Icons </li></ul></ul><ul><ul><ul><li>Add Logo……………………………………. 5 </li></ul></ul></ul><ul><ul><ul><li>Add iPhone Icon & Favicon…………. 7 </li></ul></ul></ul><ul><ul><ul><li>Add Icon to Menu List………………… 11 </li></ul></ul></ul><ul><ul><li>Mobile URL………………………………….. 4 </li></ul></ul><ul><ul><li>Preview </li></ul></ul><ul><ul><ul><li>Live Demo of Mobile Site……………. 12 </li></ul></ul></ul><ul><li>Contact Us…………………………………. 37 </li></ul><ul><li>Extras </li></ul><ul><ul><li>Delete Mobile Site……………………….. 38 </li></ul></ul><ul><ul><li>Hide in Navigation </li></ul></ul><ul><ul><ul><li>Test modules privately………………… 35 </li></ul></ul></ul><ul><ul><li>QR Codes……………………………………… 34 </li></ul></ul><ul><li>Modules……………………………………. 13 </li></ul><ul><ul><li>Events </li></ul></ul><ul><ul><ul><li>Add Calendar of Events……………… 14 </li></ul></ul></ul><ul><ul><ul><li>Recurring Events………………………… 15 </li></ul></ul></ul><ul><ul><li>External Link……………………………….. 16 </li></ul></ul><ul><ul><ul><li>Social Media Accounts……………….. 17 </li></ul></ul></ul><ul><ul><li>Generic Content </li></ul></ul><ul><ul><ul><li>Blank Page …………………………………. 18 </li></ul></ul></ul><ul><ul><li>Locations </li></ul></ul><ul><ul><ul><li>Add Locations…………………………….. 19 </li></ul></ul></ul><ul><ul><ul><li>Intersection/Hours/Description…. 20 </li></ul></ul></ul><ul><ul><ul><li>GPS & “Find Near Me”……………….. 21 </li></ul></ul></ul><ul><ul><li>Menus </li></ul></ul><ul><ul><ul><li>With Excel File……………………………. 22 </li></ul></ul></ul><ul><ul><ul><li>Add Menu Manually…………………… 23 </li></ul></ul></ul><ul><ul><ul><li>Adding Menu Items……………………. 24 </li></ul></ul></ul><ul><ul><li>Offers / Promotions </li></ul></ul><ul><ul><ul><li>Add Coupons / Specials………………. 25 </li></ul></ul></ul><ul><ul><li>Photo Album </li></ul></ul><ul><ul><ul><li>Add Pictures / Gallery…………………. 26 </li></ul></ul></ul><ul><ul><li>Reviews </li></ul></ul><ul><ul><ul><li>Link to Yelp!/Other review site……. 27 </li></ul></ul></ul><ul><ul><li>Sub-Menu </li></ul></ul><ul><ul><ul><li>Organize Mobile Site…………………… 28 </li></ul></ul></ul><ul><ul><ul><li>Sub-Menu Example…………………….. 29 </li></ul></ul></ul><ul><ul><li>YouTube Video </li></ul></ul><ul><ul><ul><li>Watch Video on Mobile Site………… 32 </li></ul></ul></ul><ul><ul><ul><li>Get Embed Code from YouTube…… 33 </li></ul></ul></ul>

×