Famous Freddy Mobile Platform Manual

Mobile Platform Manual
Version 4.5

1) Login to
admin.famousfreddy.com
2) Click on +Add a Mobile Site
3) Name your mobile site
4) Enter your desktop site’s URL –
including the http://
5) Select Language & Currency
6) 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
2
Creating a Mobile Site
Instructions for: General

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
3
Creating a Mobile Site (Continued)
Instructions for: General
Favicon Examples
4

Selecting a Theme
4
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
3
4
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 Computer
3) Choose File from your computer and
click Upload
Set an Image From the Web
4) 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

1) Click Upload
2) Select the file you want to upload
3) Click Ok when your file is uploaded
4) Click your photo to get it alone
5) Right-click on your photo and select “Copy
Image URL” (“Copy Image Location” on a
PC)
6) Paste this URL into a new browser window
7) 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
8
“Set an Image from Web” or copy an “Image URL” ?

Customize the Background (Main)
1) Click Backgrounds on the left
side navigation
The 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
9

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 field
If 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
10

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
navigation
2) Click the Add New Item on the right
hand side of the Items Tab
3) 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
11
Add Header Sliding Images using Image Slider
5

Adding Social Media
12
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

Adding Social Media (Continued)13
1) To the right of the Social Media
Icons, you can set the horizontal
alignment of the icons
Note: 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

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 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
m.famousfreddy.com/ Instruction-Manual
14
Changing the Mobile Site URL

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

Every module has the option to add an Icon
1) Click on the blue “Choose” button
2) Use the Search bar to find the
perfect icon
3) Searching broad topics is usually
best (ie: “Social Media” instead of
“Facebook”
1
2
16
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

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
18
Live Demo of Mobile Site

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
19
Add Modules to Mobile Site

1) Always start with +Add a
New Item on the home
screen
2) Select Events
3) 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
20
Module: Events

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
1
21
Module: 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

1) Always start with +Add a New
Item on the home screen
2) Select External Link
3) Type the text that you want to
appear on the bar
4) 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
23
Module: External Link

24
Module: Forms
1) Always start with +Add a
New Item on the home
screen
2) Select Form
3) 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 here
2) 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.
user must fill out this field
in order to submit the Form
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
2) Field Label is what will be shown
above the date selector
3) Instructions for user will show below
date selector
4) Check the Required box if a user
must fill out this field in order to
submit the Form
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 – Dropdown
1) At the top of the Dropdown
field there is a Preview. This
will update in real-time as you
edit this field
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 – Dropdown
Options Editor
line
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
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
shown above the radio
buttons
below radio buttons
user must fill out this field
in order to submit the Form
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
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
Options Editor
line
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
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
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
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. abc@def.com )
1
2
3
Name, email, most-used form field
6
7
4
5
8

1) Always start with +Add a New
Item
2) Select Generic Content
appear on the bar
4) Add any content you need
5) 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
42
Module: Generic Content

Features Available Include:
1) Text Editing – bold, italic, underline, strikethrough
2) Colors – text color, background color
3) Hyperlink –type text, highlight it, then add link (see External Link for rules on link format)
4) Images –must be already uploaded to the internet
5) Bullets & Numbering
6) Blockquotes & Horizontal Line
7) Indents
8) Align left, center, or right
9) Font size and Format
10) Undo & Redo
11) HTML editor – view page as HTML code
2
3
4
5 9 11
6
7
8 10
1
43
Generic Content Features

This is also how to make Click-to-Call buttons or text, Click-to-Email, and Click-to-SMS
44
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

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
45
Adding a Link to an Image (Continued)

1) Click on +Add a New Item
on the home screen
2) Select Locations
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
46
Module: Locations

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
47
Module: Locations (Continued)
2

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

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
49

1) Start with +Add a New Item on
the home screen
2) Select Menu
appear on the bar
4) Click Add Menu to add the
*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
50
Module: Menus

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 Menu
4) Click +Add Menu Item
Specific Menu Item descriptions are
covered on the following pages
1
2
3
4
51
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 it
5) You can now select this
Category from the drop
down menu
Module: Menu (Continued)

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 price
3) 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
53
Module: Menus (Add Menu Items)

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
54
Module: Menus (Add Menu Items)

on the home screen and
Select Offers/Promotions
to appear on the bar
ie: Offers, Coupons,
Specials, Exclusive Mobile-
Only Deals!
3) Click Add Offers to add the
4) Click +Add Offer to create
an offer
Specific offer details are
covered on the next page
1
2
3
4
55
Module: Offers/Promotions

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
56
Module: Offers/Promotions (Continued)

1) Click on +Add a New Item on
the home screen
2) Select Photo Album
appear on the bar
4) Click Add Photo Album to add
the module to your mobile site
5) Click the +Add a New Photo to
enter a URL
2
3
4
5
57
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.

1) Click on +Add a New Item on the
home screen
2) Select Reviews
appear on the bar
4) Click Add Reviews to add the
Specific Review details are covered
on the following page
2
3
4
60
Module: Reviews

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
61
Module: Reviews (Continued)

on the home screen
2) Select Sub-Menu
to appear on the bar
4) 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
62
Module: Sub-Menu

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
63
Module: Sub-Menu (Continued)

1) Select Sub-Menu
2) Title it “About Us”
3) Add it to your Mobile Site
4) 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
64
Module: Sub-Menu (Example)

1
2
3
4
5
2) Title this module “About
the Chef”
3) Add it to the Sub-Menu
4) 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
65
Module: Sub-Menu (Example Continued)

1) Add another a New Item
again to create
your next topic
3) Title this module “About
the Staff”
4) Add it to the Sub-Menu
5) 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
66
Module: Sub-Menu (Example Continued)

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-Menu
3) 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
67
Module: Sub-Menu (Example Preview)

on the home screen
2) Select YouTube Video
3) 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
68
Module: YouTube Video

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
69
Embed Code from YouTube

70
Module: RSS Feed
on the home screen
2) Select RSS Feed
3) 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

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 changes
4) 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
71
Available when 2 or more modules are added to the mobile site

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 file
5) 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
72
Extras: QR Code

Extras: Delete Mobile Site73
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

1) Each module has its own Settings
2) 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
74
Settings

1) In any module’s Settings, select the
“Hide in Navigation” box
2) You will see your Module in the menu list
3) 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
75
Settings: Hide in Navigation
1

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
navigation
2) 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
76
Add Redirection Script

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
77
Copying the Mobile Website
4
http://m.famousfreddy.com/

Index78
• 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……………………………………………………….............. 19
Events………………………………………………………….20
Add Calendar of Events…………........ 21
Recurring 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

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Similar to Famous Freddy Mobile Platform Manual

Similar to Famous Freddy Mobile Platform Manual (20)

Famous Freddy Mobile Platform Manual