Getting Started with ShortStack with Sho wit SHORTSTACK Presented by
Oct 18, 2014
Getting Startedwith ShortStackwith Showit
SHORTSTACK
Presented by
Table of Contents
Let’s Get Started! ................................................................................1
Creating an App ...................................................................................4
Adding Widgets to Your App .......................................................6
Adding a Theme to Your App .......................................................7
Building and Customizing a Form ............................................8
Installing Your App ......................................................................... 11
Editing Your Installed App......................................................... 13
ShortStack’s Top Features ........................................................ 14
ShortStack Resources .................................................................. 15
TOC
1
Let’s Get Started!
Welcome to ShortStack! We’re here to help you maximize your social media presence, using apps, of course. The features we
offer – including contests, polls, data collection and analytics – will help you get the most from your Facebook Page, website and
mobile. And we’re pretty sure they’ll knock your socks off! Ready to have some some fun?
2
Let’s Get Started!
Once you log into the platform, your default screen is the App Manager. This is where you’ll see all of the apps you’ve built, the
page they’re installed to, the method used for publishing and the last time you edited the app.
At the top left, you’ll see our navigation bar. It consists of the following:
Designer - Where you will design, edit and publish your apps.
Apps - Where you can create new apps, see a summary of the apps you’ve created, see which apps are installed, etc.
Media - Where ShortStack will host all your media files (Images, PDFs, etc.). The media manager accepts PNG, JPG, GIF, MP3,
PDF, XML, SWF, JS, CSS files. All files need to be 5 megabytes or smaller.
Templates - Where you’ll find template designs you can use to create your own apps.
Forms & Promos - Where you can create forms that your visitors can fill out in order to enter contests or to submit information.
In this section you can create new forms, edit existing forms, view submitted entries and export data.*
*Export available on Pro Plans
3
Let’s Get Started!
On the right side of the navigation bar you’ll see a small image of Jack, our Pancake Mascot.
We use Jack to inform users of new features, free resources, helpful downloads, platform
alerts and articles that appear on our blog, Socially Stacked.
Next to Jack, you’ll see your username. When you hover over this, a drop down
allows you to access different account settings such as “Change Plan” and “Logout”.
Next to your username you’ll see “Help.” When you hover over this, a drop down menu
provides links to documention and other resources that will help you when building
your apps with ShortStack. In the future you will return to the help menu often.
4
Creating an App
There are two ways to create apps. You can start with a “blank app” and build your app from scratch or you can create an app
using one of our templates.
TO CREATE AN APP FROM SCRATCH:
1. Navigate to the “Apps” section from the menu bar located in the top left-hand corner of the page.
2. Click the “Create Blank App” button.
3. Name your app in the field that is labeled “Type new App name”
Give the app the name you want it to appear as in Facebook. (You can always change this later.)
4. Click on “Create Blank App.”
1
2
3 4
5
Creating an App
TO CREATE AN APP FROM A TEMPLATE:
1. Navigate to the “Apps” section from the menu bar located in
the top left-hand corner of the page.
2. Click the “Create App from Template” button.
3. Search for templates by using the “Search” bar in the right
hand corner, by using “Browse tags” or by viewing all
templates.
4. Click the thumbnail of the template you want to use.
5. Click the “Make App” button (above and to the right of
the template you chose).
1
2
3
5
4
6
Adding Widgets to Your App
Widgets are the building blocks for your app. Each widget has a different function (promotion, voting, polling,
etc.). Hover over any widget icon to see a description of its function. Familiarize yourself with the
widgets before you start building so you can make an app that functions the way you want it to.
To add a widget to your app, hover over the widget icon and click it. When you add a widget to your
app, the “Edit Widget” window will automatically appear. You can choose to edit the widget now or cancel and
configure the widget later.
To delete a widget from your app, click on the “X” located on the right of the widget in the Edit Widgets
column.
To edit a widget, just click the pencil icon in the right corner. Here you can access the full settings of a widget,
enable commenting and sharing, then configure the visibility features. The visibility features include date,
country and fan visibility.
To clone a widget, click the “two papers” icon.
You can organize your widgets by hovering over the widget icon in the Edit
Widgets column. Click and drag to change the order of your widgets. The
widgets will appear in the Live Preview column in the order they are placed
in the Edit Widgets column.
When you create an app from a Template, widgets are automatically carried over from the template into the
“Designer”. You can fully customize this template.
To learn more about each widget’s capabilities visit http://help.shortstackapp.com/ click on “Widget Reference”
on the left-hand side.
7
Adding a Theme to Your App
Once you’ve started building your app, you can add a pre-designed theme to change the look
and feel of your app. We provide more than 100 themes to choose from.
ADDING A THEME TO YOUR APP:
1. Have your app open in the “Designer”.
2. Click on “Theme Selector.”
3. Hover over the color theme icons to see the name of the theme. You can click on a
theme icon to see a sample of what the color scheme and font look like.
4. If you don’t like what you chose, hit “Cancel” on the bottom of the theme menu and you
will be returned to the default theme. If you like what you chose, click “Save” on
the bottom of the theme menu and the theme will be applied to your app.
You can also use custom CSS to build your own themes within your app.
Every template comes with a pre-selected theme that you can opt to change at any time.
2
3
4
Tip: You can choose to select “No Theme” and you can choose to remove all titles and borders
from the app. Make sure you click “Save” once you’ve made your selections.
8
Building and Customizing a Form
Forms can be used to collect data from your visitors. You can add fields to collect
names, email addresses, age, address, photos and more.
If you’re using Shortstack to collect information or run a promotion you will need to
create a form. Note: If you’re running a promotion, you must use the Promotion Widget. If you are
not giving away a prize, the Custom Form Widget is ideal.
There are two ways to access the “Form Designer”. By clicking “Create New Form” in
a promotion widget or clicking “New Promotion” in “Forms and Promos”
TO BUILD A PROMOTION FORM FROM THE DESIGNER:
1. Open your app in the “Designer” within ShortStack.
2. Add the “Promotion Widget” located under Promotion Tools.
3. The “Edit Widget” window will appear.
4. If you’ve already created a form in the “Forms & Promos” manager, use the drop
down menu to select your form. Otherwise click “Create New Form.”
5. Fill in the corresponding boxes.
6. Click “Create and Continue to Form Designer.”
Tip: Be specific with your form names so you can easily locate them later.
4
5
6
9
Building and Customizing a Form
TO BUILD A FORM FROM THE FORMS & PROMOS MANAGER:
1. Navigate to the “Forms & Promos” manager.
2. Click “New Promotion”
3. Fill in the empty fields.
4. Click “Create and Continue to Form Designer.”
2
1
10
Building and Customizing a Form
Now that you’re in the “Form Designer” you’ll be able to add form fields, edit fields and
set up your form settings.
To add a field to the form, click on the green “+” located on each form field. Each field
can be edited by selecting it. The settings appear on the left side.
“Form Settings” is where more settings can be configured, including our
Refer-a-Friend feature, email notices and more.
The “Manage Integrations” button is where you can manage integrations for
MailChimp, Highrise, Constant Contact and Custom Webhooks.
Tip: For more information on building, editing and using forms and promotions click here.
11
Installing Your App
Now that you’ve built your app you’re ready to install it to your Facebook Page. There
are two options for publishing an app: Quick Publish and Custom Publish. To learn the
differences between Quick Publish and Custom Publish, read more here.
FOLLOW THESE SIMPLE STEPS TO QUICK PUBLISH YOUR APP:
1. From the “Designer”, click on “Install App” in the top left corner.
2. If you have not connected your personal Facebook profile or if you are not
logged into ShortStack with your personal Facebook profile, you’ll be prompted
to “Log in with Facebook”.
3. Select “Choose Quick Publish.”
4. You must be an admin of a Page to publish to that Page. ShortStack will
automatically list all of the Facebook Pages you are an admin of.
Click “Install” on the Page you would like to install the app to.
5. Copy your “Smart URL” and use it to promote your app any time you link to it.
Once the app is installed, it appears underneath your Facebook Cover Photo.
1
3
4
5
Tip: Be sure to use the “Smart URL”, this is the only way mobile users can
access your app. To learn more, click here.
12
Installing Your App
FOLLOW THESE SIMPLE STEPS TO CUSTOM PUBLISH YOUR APP:Note: Custom Publish is only available on our Pro Plans.
1. From the “Designer”, click on “Install App” in the top left corner.
2. If you have not connected your personal Facebook profile or if you are not logged into ShortStack with your personal
Facebook profile, You’ll be prompted to Log in with Facebook.
3. Select “Choose Custom Publish.”
4. Follow the detailed instructions to Custom Publish.
5. Click “Save and Continue.”
6. Copy your “Smart URL” and use it to promote your app anytime you link to it.
Once the app is installed, it appears underneath your Facebook Cover Photo.
3
13
Editing Your Installed App
Once you’ve built and installed your app you may want to make edits to it.
ShortStack allows you to make edits to your app at any time and apply those to
Facebook as needed.
FOLLOW THESE SIMPLE STEPS TO EDIT YOUR INSTALLED APPS:
1. Log in to ShortStack.
2. You’re directed to the “App Manager” upon signing in, so choose the app you
would like to edit by clicking on the app name.
3. Now that your app is open in the “Designer”, make your edits.
4. Click “Publish Changes” in the right-hand corner when you are finished.
4
2
Tip: When it says “Published and Up-to-Date” in the right-hand corner, this means that all
recent changes have been published.
14
ShortStack’s Top Features
ShortStack has a huge variety of capabilities and features. If we tried to explain them all in this document it’d be more than we’d want
to write and more than you’d want to read! This list includes our top features with links that demonstrate how to execute them.
Create a Hotspot:
http://youtu.be/CHkZR140CmA
Create a Sweepstakes/Giveaway:
http://youtu.be/2JHinO6hXhQ
Mailchimp Newsletter Sign Up:
http://youtu.be/X0E_FqCnRaA
Create a Photo Contest:
http://youtu.be/KFXKiok7nXM
Vote Only Contest:
http://youtu.be/hODakCx2_pg
ShortStack for Mobile:
http://youtu.be/M8uQRs1fcls
Refer-a-Friend:
http://youtu.be/U-WXgFfr0rM
Promotions Guide:
http://help.shortstackapp.com/main-menu/mastering-shortstack/promotions-guide/
Fan-Gate an App
http://youtu.be/u_CnMTVY0LE
Offer a Coupon
http://youtu.be/1AsfWae1AXc
15
ShortStack Resources
We do our best to offer as many free resources as possible to our users so you can fully understand and leverage the benefits of
ShortStack. Use the following links to learn more about what ShortStack can do for you.
Resources Page:
http://www.shortstack.com/resources/
Help Docs:
http://help.shortstackapp.com/
ShortStack Tour:
http://www.youtube.com/watch?v=IwvIDflqIYQ&feature=share&list=PLwamYAKwwpjr3kkaHTDM5hYz1SYskrRKg
Facebook Promotion Guidelines:
http://help.shortstackapp.com/main-menu/mastering-shortstack/promotions-guide/facebook-promotion-guidelines/
ShortStack Support:
http://www.shortstacksupport.com
Like this eBook? Subscribe to our mailing list to receive more free content as we release it.
CLICK HERE TO SUBSCRIBE
Tutorial Videos:
http://www.youtube.com/shortstackresources
Facebook and Social Media Tips:
http://www.sociallystacked.com