Famous Freddy Mobile Platform Manual

Mobile Platform ManualVersion 4.5

2

1) Login to admin.famousfreddy.com

2) Click on +Add a Mobile Site3) Name your mobile site4) Enter your desktop site’s URL –

including the http://5) Select Language & Currency6) Update your SEO by either

pulling it directly from the desktop site, or manually typing in the Meta description & keywords

2

4

5

6

3

Creating a Mobile SiteInstructions for: General

3

1) Enter your Google Analytics ID to track traffic **Very Important! If you do not already have a Google Analytics account, we recommend creating one - even if you only use it for your mobile site

2) Create an Apple Touch Icon – can be a miniature version of the company’s logo, will show up like an App on a phone’s home screen - Make sure that the size is 114x114 and it is a PNG or JPG file

3) 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.

4) Click the “Enable ‘Add to Home Screen’ Notice?” box and a drop down will show on iPhones prompting the user to “Add to Home Screen” *Recommended

*Note that Apple Touch Icons and Favicons must be uploaded elsewhere and only the URL of the uploaded file needs to be placed on the mobile site

1

3

2

Creating a Mobile Site (Continued)Instructions for: General

Favicon Examples

4

4 Selecting a Theme

1) Click on Theme in the left side navigation

2) Choose “No theme” to keep a blank mobile website

3) Select a Category to see the available Themes

4) Point to a thumbnail to see an enlarged image of the Theme

5) Click on the Theme to select it. There will be a Blue outline around the Theme

6) Click Save to apply this theme

Notes:-Themes can be added at any time-Editing one element of the mobile website (backgrounds, logo, menu navigation bar color, etc.) will not effect the rest of the Theme elements-A new Theme can be chosen at any time, and will not override elements that have been manually adjusted

1

3

2

4

5

1

34

5 Adding a Logo (Standard)

1) Go to Header/Footer on the left side navigation.

2) You have two choices for the Header Area: Standard or Custom

Instructions for Standard Header:Choose whether to upload a Logo, or add an image from the Web

Upload a File From Your Computer3) Choose File from your computer and click Upload

Set an Image From the Web4) Copy the URL of the Image you want to use as the logo and Update the Page

2

1

6

2

Adding a Logo (Continued)

1) Next you’ll want to set the Header Height – Recommended height at least 100px

*Note – this will increase the size of the Header Area, not the Logo itself

2) Next choose the horizontal alignment for the Logo – Recommended alignment is Center so that the site looks the same on every mobile device regardless of screen size

1

3

5

4

7 Adding a Logo (Custom)

1) There are 2 different Custom Header Options, and Footer options in the Custom tab

2) Custom Header will override anything set in the Standard Header – and show up on every page of the mobile site

3) Alternate Home Page Header will only show on the Home Page of the mobile site

4) Footer content will show on every page of the mobile site above the Switch to Desktop text

Each one of these fields has all of the options of a Generic Content module

Common uses include: • Social Media/Click-to-Call

buttons in the custom header to follow users around the site

• A Powered By Logo or text in the footer

• Featured specials or sales in the Alternate Home Page header so the user sees them immediately, with a link to the Offers/Promotions module

8

1) Click Upload 2) Select the file you want to upload3) Click Ok when your file is uploaded4) Click your photo to get it alone5) Right-click on your photo and select “Copy

Image URL” (“Copy Image Location” on a PC)

6) Paste this URL into a new browser window7) If the URL says “https://” delete the “s”, hit

enter to go to this new URL, and then copy the new URL

8) Go back to your Mobile Site and paste this URL into the “Set Image from Web” or “Image URL” field

(We recommend using Picasa to Upload Files. If your photo is already on the internet, Skip to Step 5)1

2

5 6

7

“Set an Image from Web” or copy an “Image URL” ?

9 Customize the Background (Main)

1) Click Backgrounds on the left side navigationThe first background you will set is the Main Area

2) Set a solid color by using a HEX Color Code or click the color wheel and select an existing color

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

6) Continued on next page…

1

2

3

5

10 Customize the Background (Header)

The second background you will set is the 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 fieldIf your Logo is Transparent, or doesn’t need to match the Header Area Background you can also:

3) Upload an image to place behind it

4) 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

2

3

4

11

When you want to have an image slideshow on the header area of your mobile website, follow these steps to add a images.1) Go to Image Slider on the left side

navigation2) Click the Add New Item on the right

hand side of the Items Tab3) Enter the image’s URL if you want

to add an image from the web; or you may upload your own file. After entering the image URL or uploading the image file, click the Add New Item button.

4) Repeat Steps 2 and 3 if you want to add more images.

5) You can edit the sliding settings on the settings tab. Each field has its own explanatory note on how to use each setting.

1

2

3

This allows you to have sliding images on the header part of the mobile website

Add Header Sliding Images using Image Slider

5

12 Adding Social Media

1) Click on Social Media on the left side navigation

2) The main URL for each Social Media Account is already in the text field

3) Paste your company-specific URL ending into each field that your company has an account for

4) Use the Arrows to the left of the icons to arrange the order by clicking and dragging

Continued on next page

1

2

3

4

13 Adding Social Media (Continued)

1) To the right of the Social Media Icons, you can set the horizontal alignment of the iconsNote: Generally the icons will have the same horizontal alignment as the Logo

2) Choose which Display Zone to have the Social Media icons in

3) Checking the “Before Content” box makes the icons appear under the Header/Logo and above the menu navigation links

4) Checking the “After Content” box makes the icons appear under the Header/Logo and above the menu navigation links

5) Save your changes

2

3 4

14

1) Go to Mobile URL on the left side navigation

2) The name of your mobile site is the default URL. Shorten the URL if the name is very long

Standard:

Custom Domain Name:

3) Follow 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

m.famousfreddy.com/ Instruction-Manual

Changing the Mobile Site URL

15 Other Available Customization

1) Using the Custom CSS link on the left navigation, you can edit almost every aspect of your mobile site

2) Type these codes into the text box to edit these options

3) For more CSS options, feel free to e-mail the contact at the end of this manual

4) 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

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;}

Sub-Menu List Background Color:.iList li:not(.iMore) a:not(.iSide), .iList li.m-li-static.m-li:not(.iMore) {background-color:#000000;}

“Switch to Desktop View” Font Color:.ui-footer {color:#ffffff;}

16

Every module has the option to add an Icon1) Click on the blue “Choose” button2) Use the Search bar to find the

perfect icon3) Searching broad topics is usually

best (ie: “Social Media” instead of “Facebook”

1

2

If you need customized icons or set of icons, send us the picture and we will upload it to the icon section for you!

Other Customization: Icons

17 Password Security

1) Click on Password Security in the left side navigation

2) Choose a password that you will easily remember, and can give to anyone that needs access to the mobile site

3) Retype your password to confirm it

4) Click Save

*Note: To change a password, return to this screen and simply enter and confirm your new desired password

To remove a password completely, return to this screen, leave both text fields blank, and click Save

2

3

4

1

18

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. This preview is only a simulator – the best way to view your site is to type the Mobile URL you created into your own phone’s browser and actually visit the website!

1

2

We recommend previewing often

Live Demo of Mobile Site

19

1. From the main screen, click +Add a New Item

2. You will see a list of all the modules

3. 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!)

1

2 3

Add Modules to Mobile Site

20

1) Always start with +Add a New Item on the home screen

2) Select Events3) Type the text that you want

to appear on the bar, ie: Calendar, Activities, Upcoming Events

4) Click Add Events to add the module to your mobile site

5) Click +Add an Event

2

3

4

5

Module: Events

21

1) Name your Event 2) Select the Date and

Time it begins, and the Date and Time it ends

3) Check the All Day box if the event spans the entire day or leave the end date and time blank if it is not specified

4) You can also enter a description using the same toolbar found in the Generic Content module

*If your event repeats follow directions on the next page

2

3

1Module: Events

4

1) If your event repeats 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 stop repeating

4) Check the box of the day the event will repeat

22 Module: Events

1 2

3

4

23


2) 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) You can link to websites,

phone numbers (click-to-call), e-mail addresses (click-to-email), and text messages (click-to-SMS)

6) 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.

2

3

4

6

5

Module: External Link

24 Module: Forms


2) Select Form3) Name the Form -

"Contact Us", "Reservations", "Quote Request", etc.

4) Click Add Form

2

3

4

25 Module: Forms

1) Your Title can be edited here2) The Instructions Field will be

shown to end-users above the Form, let them know why they should fill out this form

3) Enter the email addresses of those people who should receive a Form every time one is submitted

4) If someone should receive the form as a Blind copy, enter their email address in the Bcc Recipients field

5) You can always come back to the CMS and download all of your Form Submissions by clicking Export Data in the top right corner

1

2

4

3

5

26 Module: Forms

1) The next section that should be filled out is the Form Settings in the top right corner

2) The Confirmation Options tab contains options for after the form has been submitted

3) Confirmation Text is what will be displayed on your mobile website once the user taps "Submit". Thank You: "Thanks! We'll call you to confirm shortly" Next steps: "We have received your submission. Please arrive 15 minutes prior to your appointment"

4) If you would like end-users to be directed to a different page of your mobile site, you can enter that URL in the Confirmation Redirect URL field

5) Users will be sent there instead of seeing the Confirmation Text

1

2

3

4

27 Module: Forms

Confirmation Emails:

1) If you would like an email to be sent to end-users, you can check the Send Confirmation Email to User box. *Be sure to include a Required Email field in your Form if you check this box

2) From Display Name is the Name or email address that your Confirmation Email will come from. This can be "John Doe" or "info@YourClient'sBusiness.com"

3) Enter a Reply To email address to allow end users to reply to the confirmation email* If this field is left blank, end-users will not be able to reply

4) Construct your Confirmation Email using the Subject and Body fields

1

2

3

4

28 Module: Forms

1) The Customization tab allows for advanced customization

2) Simply paste the URL of a Submit Button into this field, and you will have a customized button on your form.

3) Save Form Entry Data is checked by default. This allows you to download all entries in one CSV filed by clicking "Export Data" on the main Forms Editor

*More Customization options will be added as they are developed

1

2

3

29 Module: Forms

1) When you have new Form, there is a message bar instructing you to Add a new Form Field

2) Click on the drop down menu to pick a Form Field

3) Options Available include:-Check Box-Check Box List-Date-Dropdown-Multi Line Text-Multiple Choice-Section Break-Single Line Text

1 2

3

30 Module: Forms – Check Box

1) At the top of the Check Box Field there is a Preview. This will update in real-time as you edit this field

2) Field Label will show up underneath the checkbox

3) Predefined value is what will show up if the user has checked the box (ie: Setting Predefined Value as “Yes” will let you know that the user has checked the box)

4) Instructions for user will show above the Field Label

5) Check the Required box if a user must fill out this field in order to submit the Form

6) Default state is used to determine whether the box initially appears Checked or Not Checked

1

2

3

Singular check box, ie: “I agree to Terms”

4

5

6

31 Module: Forms – Check Box List

1) At the top of the Check Box List Field there is a Preview. This will update in real-time as you edit this field

2) Field Label is what will be shown above your Check Box options

3) Instructions for user are to let them know which options to select, how many choices to pick, etc.


5) Use Add Option to add your check boxes. Clicking this 3 times will give us 3 options *All Text & Values should be the same unless your form is integrating with another system

6) To add more than 1 option at a time, use the Options Editor -- Instructions on Next Page *Recommended

1

2

3

5

4

32 Module: Forms – Check Box List

1) To add more than one option at a time, use Options Editor

2) List each option on its own line

3) Click OK and all items will be added as Check Boxes

1

2

3

33 Module: Forms – Date

1) At the top of the Date Field there is a Preview. This will update in real-time as you edit this field

2) Field Label is what will be shown above the date selector

3) Instructions for user will show below date selector


5) The date will default to the date the form is created. You can select a different default date with the calendar pop-up

6) Advanced Field Settings are also available – Instructions on Next Page

1

2

3

4

5

34 Module: Forms – Date

1) Advanced Field Settings allow only certain dates to be accepted by the Form

2) Date used for age will require the user to be 21 years old

3) Past-to-present date range allows you to pick your own minimum date

4) Current to Future years is the default used for selecting any date in the future

1

2

4

3

35 Module: Forms – Dropdown1) At the top of the Dropdown

field there is a Preview. This will update in real-time as you edit this field

2) Field Label is what will be shown next to the dropdowns

3) Instructions for user will be next to dropdown


5) If your dropdowns require Groups, you can first add a Group, then add Options

6) Use Add Option to add your dropdown items

7) If adding items to a Group, use the Add Options next to that Group Label

*All Text & Values should be the same unless your form is integrating with another system

8) To add more than one option at a time, use Options Editor – instructions on next page

1

2

3

4

5 6 7

36 Module: Forms – Dropdown1) To add more than one

option at a time, use Options Editor


3) Click OK and all options are added at once

4) In your preview section, you can try out the dropdown. Notice that Groups are not selectable, only Options are

1

2

3

4

37 Module: Forms – Multi Line Text

1) At the top of the Multi Line Text field there is a Preview. This will update in real-time as you edit this field

2) Field Label is what will be shown above the Multi Line Text Box

3) Instructions for user will appear below the box.


5) Default text will show initially, and then be removed when a user types in the box – this field can also be left blank

1

2

5

a.k.a. Comment Box

3

4

38 Module: Forms – Multiple Choice

1) At the top of the Multiple Choice field there is a Preview. This will update in real-time as you edit this field

2) Field Label is what will be shown above the radio buttons

3) Instructions for user will be below radio buttons


5) Use Add Option to add your multiple choice items

*All Text & Values should be the same unless your form is integrating with another system

6) To add more than one option at a time, use Options Editor – instructions on next page

1

2

3

Radio buttons, only one option can be selected at a time

4

5

39 Module: Forms – Multiple Choice

1) To add more than one option at a time, use Options Editor


3) Click OK and all options will be added at once

1

2

3

Radio buttons, only one option can be selected at a time

40 Module: Forms – Section Break

1) At the top of the Section Break field there is a Preview. This will update in real-time as you edit this field

2) Description is what will be shown to users

3) Users cannot interact with this form field

1

2

This is a description field used to break your form into sections, or to give a description above the form field

41 Module: Forms – Single Line Text

1) At the top of the Single Line Text field there is a Preview. This will update in real-time as you edit this field

2) Field Label is what will be shown above the field

3) Use the Predefined Value field to have text automatically show up in the field – this will be erased when a user types in the field

4) Instructions for user will be below the field


6) Use Advanced Field Settings if your Field is for an Email address

7) You can also set a Maximum Length for the field

8) Checking the “Email Field” box will make the Form do a quick check to make sure the email address is of the correct format( e.g. [email protected] )

1

2

3

Name, email, most-used form field

6

7

4

5

8

mailto:[email protected]

42

1) Always start with +Add a New Item

2) Select Generic Content3) Type the text that you want to

appear on the bar4) Add any content you need5) Add Content Page

The toolbar is explained in detail on the next slide

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

2

3

4

5

15

Module: Generic Content

43

Features Available Include:1) Text Editing – bold, italic, underline, strikethrough2) Colors – text color, background color3) Hyperlink –type text, highlight it, then add link (see External Link for rules on link format)4) Images –must be already uploaded to the internet5) Bullets & Numbering6) Blockquotes & Horizontal Line 7) Indents8) Align left, center, or right9) Font size and Format10) Undo & Redo11) HTML editor – view page as HTML code

2

3

4

5 9 11

6

7

8 10

1

Generic Content Features

44

This is also how to make Click-to-Call buttons or text, Click-to-Email, and Click-to-SMS

1) This can be done anywhere text can be entered on the mobile site. For this demo we are using a Generic Content module, and adding Social Media Icons

2) Select Generic Content and title it Social Media (Connect with us, etc.)

3) Add an image by clicking the Image box

4) Copy and paste the Social Media Icon’s URL into the corresponding field

5) We recommend setting social media icon dimensions at 64x64

6) Continued on the next page…

2

3

4

5

Adding a Link to an Image

45

1) Once the image is added to your page, click on it to highlight it

2) Click on the Link box and type in the URL to your companies social media site, in this case – Facebook: (http://www.facebook.com/YourName)

3) When end users visit this page on your mobile site, they will see the icon you have added. Tapping this icon will take them to your Social Media website

*If you have made this image Click-to-Call, tapping it will allow the user to call you

1

2 3

Adding a Link to an Image (Continued)

http://www.facebook.com/YourName

46

1) Click on +Add a New Item on the home screen

2) Select Locations3) Type the text that you want

to appear on the bar ie: Locations, Find a Store Near You, Where We Are, etc.

4) Click Add Locations to add the module to your mobile site

2

4

3

Module: Locations

47

1) Once you have added the module, you can set the GPS/Find Near Me Options.

2) This will display a prompt to your users asking them to enter City, State, Zip, or click the Find Near Me button to find a location

3) Select the dropdown menu and decide whether this prompt should be shown to users when more than 25 locations are added, Always shown, or Never shown

Adding specific location information is explained on the next page

3

Module: Locations (Continued)

2

48

1

2

3

1) Required Information:

2) Google Maps Integration

3) Click-to-Call Phone Number

• Name• City• State

•Address• Postal Code(Include these options to allow Google to map the location)

• Phone(will show up under location)


49

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 parentheses

3) Latitude and Longitude fields will be filled in by Google Maps

4) Add your e-mail address so customers who have e-mail on their mobile device can send you a message with one click

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


50

1) Start with +Add a New Item on the home screen

2) Select Menu3) Type the text that you want to

appear on the bar4) Click Add Menu to add the

module to your mobile site

*The easiest way to upload a menu is with an Excel (CSV) file

5) Download our CSV template, or use your existing menu in Excel format to upload your menu all at once

Entering a Menu manually is explained on the next page

2

3

4

5

Module: Menus

51

1) Click +Enter a New Menu 2) Name the Menu (If you only have one

Menu, this name will Not show up in the navigation)

3) Save this Menu4) Click +Add Menu Item

Specific Menu Item descriptions are covered on the following pages

1

2

3

4

Module: Menus (Add Menu & Category)

3

2

4

1

52

1) Categories can be used for Appetizers, Entrees, Dessert, Beverages, etc.

2) Click +Add Category if you need one *If categories aren’t necessary, please go to the next slide

3) Name the Category (Description is optional)

4) Save it5) You can now select this

Category from the drop down menu

Module: Menu (Continued)

53

1) Name your Menu Item (Name is Required)*Note if your business is not a restaurant, use the Menu for “Services Offered” ie: Hair Salons could name their menu item “Men’s Hair Cut”

2) Enter the price3) Enter a description – this

will show up next to the menu item

4) Include a photo of the menu item, if applicable, by copying an Image URL or uploading a file

5) Save this menu item

1

2

3

4

5

Module: Menus (Add Menu Items)

54

1) Your menu item can now be seen on the Menu page for the first Menu you created, in this case “Only Menu”

2) Continue adding menu items until your menu is complete

3) Save your menu to return to the main Menu screen

1 2

3

Module: Menus (Add Menu Items)

55

1) Click on +Add a New Item on the home screen and Select Offers/Promotions

2) Type the text that you want to appear on the bar ie: Offers, Coupons, Specials, Exclusive Mobile-Only Deals!

3) Click Add Offers to add the module to your mobile site

4) Click +Add Offer to create an offer

Specific offer details are covered on the next page

1

2

3

4

Module: Offers/Promotions

56

1

2

3

4

5

1) Titles should be catchy – Buy One Get One!, Two-For Tuesday’s!, etc.

2) Add a description with details about the offer

3) Don’t forget the fine print and expiration date! *The coupon will not show up to your customers after the expiration date. It will still be available to you in the CMS, but will not show up on the mobile site.

4) If you have a print coupon already made, you can upload it to the mobile site. Choose the file from your computer and Upload it.

5) Or - Pull an existing promotion from the internet. Copy the URL of the photo already on the internet and paste it in the “Choose an image from the web” field.*You still need to click Upload Image even if you are adding one from the web

Module: Offers/Promotions (Continued)

57


2) Select Photo Album3) Type the text that you want to

appear on the bar4) Click Add Photo Album to add

the module to your mobile site5) Click the +Add a New Photo to

enter a URL2

3

4

5

Module: Photo Album

1) Images in the Photo Album must be hosted somewhere on the internet, we recommend using Picasa

2) Copy the URL of the photo and paste it in the Image URL field*Make sure the URL begins with “http://” if it begins with “https://” you should be able to erase the “s” and get the same image. *Make sure it is the URL for the photo ONLY. Test by pasting the URL into a new browser window and making sure the photo is the ONLY thing you see.

3) Thumbnail URL is Optional – if left blank, the thumbnail will be a scaled down version of the large image

4) Title will show below the image when it is selected, not in the main gallery

2

3

58

4

Module: Photo Album (Continued)

1) Follow the steps on how to set up the Photo Album method as described on the previous pages.

2) Enter the URL of the Flickr or Picasa RSS Feed on the field found below the title field of the photo album. Instructions on how to find the RSS feed for the uploaded photos are listed below.

3) Once done, click the Save button below the instruction box.

1

2

59

3

Module: Photo Album (Continued)

If the images to be used in the mobile site’s photo album are already on the web, instead of manually uploading each photo URL, the Flickr or Picasa RSS Feed can be used.

60


2) Select Reviews3) Type the text that you want to

appear on the bar4) Click Add Reviews to add the

module to your mobile site

Specific Review details are covered on the following page

2

3

4

Module: Reviews

61

1) Click the +Add a New Review to pick a review website

2) Select a review website from the drop down menu

3) Or add your own review site by clicking +Add Other

4) 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

1

2

3

4

Module: Reviews (Continued)

62


2) Select Sub-Menu3) Type the text that you want

to appear on the bar4) Click Add Sub-Menu to add

the module to your mobile site

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

3

4

2

Module: Sub-Menu

63

1 2

3

1) Your screen now looks like it did when you had an empty mobile site.

2) Click +Add a New Item to add a module within this Sub-Menu

3) All modules are available, including the option for another Sub-Menu

Example of Sub-Menu on next page

Module: Sub-Menu (Continued)

64

1) Select Sub-Menu 2) Title it “About Us” 3) Add it to your Mobile Site4) Once inside the Sub-Menu

select +Add a New Item

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

1

2

3

4

Module: Sub-Menu (Example)

65

1

2

3

4

5

1) Select Generic Content 2) Title this module “About

the Chef”3) Add it to the Sub-Menu4) By looking at the top

navigation you can tell you are inside the Sub-Menu “About Us”

5) You will also see your first module “About the Chef” listed under Sub-Menu Items

Module: Sub-Menu (Example Continued)

66

1) Add another a New Item2) Select Generic Content

again to create your next topic

3) Title this module “About the Staff”

4) Add it to the Sub-Menu5) Now when you look at your

Sub-Menu page you will see both topics, “About the Chef” and “About the Staff”

2

3

4

5

1

Module: Sub-Menu (Example Continued)

67

1) 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

Module: Sub-Menu (Example Preview)

68


2) Select YouTube Video3) Type the text that you

want to appear on the menu navigation bar

4) Get the embed code from the video on YouTube.com

5) Paste the code into the Embed Code field

6) Add your video

2

3

5

6

Module: YouTube Video

69

1) Go to YouTube.com and find your video

2) Click on Share underneath the video

3) Click on Embed underneath the video link

4) 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

Embed Code from YouTube

70 Module: RSS Feed


2) Select RSS Feed3) Type the text that you

want to appear on the navigation bar

4) Copy the URL of the desired RSS Feed (URL should lead to a page that is plain text, example shown here: http://en.wikipedia.org/wiki/RSS#Example)

5) Paste the URL into the RSS Feed URL field

6) Add your RSS Feed

2

3

5

6

http://en.wikipedia.org/wiki/RSS

http://en.wikipedia.org/wiki/RSS

71 Other Customization: Navigation Link Spacing

1) When this is set to zero, no spacing occurs between the main menu navigation links

2) To get space between the navigation links, drag the bar to the right to increase this number, or type in the desired number.

3) Save the changes4) Preview your mobile site to

see the difference

*Note that mobile sites with navigation link spacing require different CSS Codes to change the background color / image of the navigation links

1

2

Available when 2 or more modules are added to the mobile site

72

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

Extras: QR Code

73 Extras: Delete Mobile Site

1) From the Main Screen, select Delete Site

2) When the prompt asks Are You Sure? Click on Yes

3) Your site will be deleted

Make certain that you do not want the mobile site before deleting it.

1

2

74

1) Each module has its own Settings2) Inside Settings there are SEO

Options, and Hide in Navigation options (discussed on the next page)

3) Use the Meta fields to add keywords and descriptions to each module

4) This will help users find your mobile sites through search engines

1

2

Settings

75

1) In any module’s Settings, select the “Hide in Navigation” box

2) You will see your Module in the menu list3) But not on the site when you Preview it

This can be used to test modules before making them available to the public, or for creating specific Landing Pages that can only be accessed through a specific link

2 3

Settings: Hide in Navigation

1

76

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 selected

4) 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

This code will identify mobile devices and automatically redirect them to the mobile website

Add Redirection Script

77

When your mobile site is completed, and would like to create a duplicate of the mobile website, follow the instructions below. 1) Go to the main content page of the

website and click Copy To New Site.2) A pop up window will appear. Give

the duplicate copy a new title.3) On the Standard URL field, you may

change the standard URL name according to your preferences. The duplicate copy of your mobile website can still have their own unique URL. Please follow the necessary steps on how to customize the URL of the mobile website.

4) Once done, click Copy To New Site.

1

2

3

Copying the Mobile Website

4

http://m.famousfreddy.com/

78 Index

• Branding Options– Backgrounds

• Main Area................................. 9• Header Area............................. 10• Header Image Slider………………. 11

– Copying To New Site………………………….. 77– Custom CSS...........................................

15• Icons......................................... 16• “Set Image from Web”............. 8

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

– Integrate• Mobile Redirection……............. 76

– Logo• Standard……………………………….. 5• Custom......................………….... 7

– Mobile URL…………………………………………14

– Password Security.................................17

– Preview• Live Demo of Mobile Site………. 18

– Social Media..........................................12

– Themes .................................................4

• Extras– Delete Mobile Site………………………...…..

73– Hide in Navigation

• Test modules privately………..… 75– Module Specific Settings.......................

74– Navigation Link Spacing……………………..

71– QR Codes………………………………………….

72

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

55– Photo Album

• Add Pictures / Gallery…………….57

• Add Pictures through Image RSS………………………………………….59

– Reviews• Link to Review Sites..................

60– Sub-Menu

• Organize Mobile Site……………..61

• Sub-Menu Example………………..64

– YouTube Video• Watch Video on Mobile Site…..

68• Get YouTube Embed Code…..…

69– RSS Feed …………………………………………...

70

Modules……………………………………………………….............. 19Events………………………………………………………….20

Add Calendar of Events…………........ 21Recurring Events……………………........ 22

External Link……………………………………............23

– Forms....................................................24

• Form recipient information....25

• Form Settings..........................26

• Confirmation Email.................27

• Form Fields• Check Box.................

30• Check Box List...........

31• Date..........................

33• Dropdown................

35• Multi Line Text.........

37• Multiple Choice........

38• Section Break...........

40• Single Line Text........

41– Generic Content

• Blank Page …………....................42

• Module Features......................43

– Locations• Add Locations………………………..

46• GPS & “Find Near Me”…………...

47– Menus

• With Excel File……………………....50

• Add Menu Manually……………...51

• Adding Menu Items……………….52

Famous Freddy Mobile Platform Manual

Documents

Transcript of Famous Freddy Mobile Platform Manual