Google Analytics on VSML Tabs

Heather C. — Wed, 22 Aug 2012 08:54:49 -0700

Apply a Google Analytics account to your VSML tab.

If you already know your Google Analytics tracking code, you may paste it into the Advanced Options section when creating a new VSML tab, or go into the settings for an existing tab and paste the tracking code into the field, and Save or Update. (See which metrics from your VSML tab will be tracked through your Google Analytics account below.)

To create a Google Analytics account, follow the instructions below:

Go to http://analytics.google.com
Sign-in
Click on Admin
Click on “New Account”
Complete this section with the following information

Account Name
For Website URL, select “Not a Website” from drop down menu
Time Zone
Industry Category
Uncheck boxes in the Data Sharing Settings section
Agree to Terms and Conditions
Create Account

In the Tracking Code tab, find and copy your Tracking ID
Go to the Social Apps section of your AMP account.
Click on Add New Tab underneath the Facebook page to which you wish to add the VSML tab. (If you already have a tab created, go to step 9)

Complete the settings as instructed in our Visual SML Set-Up Guide
Paste your Google Analytics tracking code into the appropriate field in the Advanced Options section.
Save (see image to the right)

Click into a VSML tab

Click the Settings button in the bar above the tab to the right

Paste your Google Analytics tracking code into the appropriate field in the Advanced Options section.
Update

What data is being tracked for which widgets?

Widget	Metric	Category	Action	Label
Signup	Signup Completions	Involver - Signup	Signup Completed	Widget ID
Images	Image Clickthroughs	Involver - Images	Clickthrough	Image ID
Pinterest	Pinterest Image Clickthroughs	Involver - Pinterest	Clickthrough	Image ID
Instagram	Instagram Image Clickthroughs	Involver - Instagram	Clickthrough	Instagram URL
Instagram	Instagram Image Views	Involver - Instagram	Image View	Instagram URL
Social Catalog	Product Views	Involver - Social Catalog	Product View	Product ID
Social Catalog	"Buy Now" clickthroughs	Involver - Social Catalog	Buy Now Clickthrough	Product ID
Pin it	Pinterest Pins	Involver - Social Plugin	Pinterest Pin

Video Contest Widget

Heather C. — Fri, 10 Aug 2012 18:39:44 -0700

Video Contest - Allows users to submit videos to a Facebook tab that can be voted on by others, includes the ability to sort by most recent as well as most votes. A winner can be selected for display by the administrator when one is decided.

Basic Settings

Export Entries to CSV – Can pull a report of all submissions, containing submitted information along with vote count for the image submitted.
Contest Name: What shows in the Contests section to moderate the submissions.
Enter contest start and end dates and times for reference.
Rules URL: link to where you have the rules surrounding the contest.
Rules Text: Will be displayed below the Submit button and link to the URL above. What the link will say. For Example: "Terms and Conditions" or "Read the Rules here."
Privacy Policy URL: link to your policy regarding the content submitted and what can be made public.
Privacy Policy Text: Will be displayed below the Submit button and link to the URL above. What the link will say
Approve content automatically?: Check this box if you want submitted videos to be displayed on the tab immediately without review. (Videos can be removed retroactively if needed.)

Or leave uncheck the box to manually approve or remove videos submitted. No videos will appear on your tab until they have been approved by an administrator of the tab, they will be marked as Pending.

Max Contest Entries per User: Facebook User ID is used to limit users' submissions to the number designated here.

Advanced Settings

Font Color: Enter the hex code for the color you wish to use for the text of the widget. Text included: "Entries," and titles of videos.
Confirmation Message: What is displayed to the user after user submits a video.
Show Winner: Select this option to display a video as the winner in your contest. In the moderation tab select the Star icon to choose the video you want to be displayed on the tab. (Note: Do not select this option until you have selected a video as the winner in the moderation section.)
Videos Per Row: How many videos in each row do you want displayed.
Show Voting: Select True if you want the vote count for each video to be displayed, False if you would like that hidden.
Videos Per Page: Number of Videos on each page, after that number of videos is reached users will paginate through the remaining videos.
Theme Color: Enter the hex code for the color you wish to use for the Theme of the widget. Items affected are the Submit button, Vote buttons, and the sort by arrow button.

Submissions Moderation (for administrators)

Click on Contests at the top to view the submissions in reverse chronological order.
Click into any submission to view all submitted information.
Click on the Check Mark to Approve the video.
Click on the X Mark to Reject the submission.
Click on the Star to make that submission the winner.

Submitting a video (user-flow)

Click to submit
Enter info
Browse for videos and open
Submit
Receive Thank You/Confirmation message
Scroll through and vote on submissions by most recent or most votes.

Go to another widget:

Photo Contest Widget

Heather C. — Fri, 10 Aug 2012 18:26:38 -0700

Photo Contest - Allows users to submit photos to a Facebook tab that can be voted on by others, includes the ability to sort by most recent as well as most votes. A winner can be selected for display by the administrator when one is decided.

Basic Settings

Export Entries to CSV – Can pull a report of all submissions, containing submitted information along with vote count for the image submitted.
Contest Name: What shows in the Contests section to moderate the submissions.
Enter contest start and end dates and times for reference.
Rules URL: link to where you have the rules surrounding the contest.
Rules Text: Will be displayed below the Submit button and link to the URL above. What the link will say. For Example: "Terms and Conditions" or "Read the Rules here."
Privacy Policy URL: link to your policy regarding the content submitted and what can be made public.
Privacy Policy Text: Will be displayed below the Submit button and link to the URL above. What the link will say
Approve content automatically?: Check this box if you want submitted photos to be displayed on the tab immediately without review. (Photos can be removed retroactively if needed.)

Or leave uncheck the box to manually approve or remove photos submitted. No photos will appear on your tab until they have been approved by an administrator of the tab, they will be marked as Pending.

Max Contest Entries per User: Facebook User ID is used to limit users' submissions to the number designated here.

Advanced Settings

Font Color: Enter the hex code for the color you wish to use for the text of the widget. Text included: "Entries," and titles of photos.
Confirmation Message: What is displayed to the user after user submits a photo.
Show Winner: Select this option to display a photo as the winner in your contest. In the moderation tab select the Star icon to choose the photo you want to be displayed on the tab. (Note: Do not select this option until you have selected a photo as the winner in the moderation section.)
Photos Per Row: How many photos in each row do you want displayed.
Show Voting: Select True if you want the vote count for each photo to be displayed, False if you would like that hidden.
Photos Per Page: Number of photos on each page, after that number of photos is reached users will paginate through the remaining photos.
Theme Color: Enter the hex code for the color you wish to use for the Theme of the widget. Items affected are the Submit button, Vote buttons, and the sort by arrow button.

Submissions Moderation (for administrators)

Click on Contests at the top to view the submissions in reverse chronological order.
Click into any submission to view all submitted information.
Click on the Check Mark to Approve the photo
Click on the X Mark to Reject the submission.
Click on the Star to make that submission the winner.

Submitting a photo (user-flow)

Click to submit
Enter info
Browse for images and open
Submit
Receive Thank You/Confirmation message
Scroll through and vote on submissions by most recent or most votes.

Go to another widget:

Instagram Widget

Heather C. — Thu, 24 May 2012 17:44:37 -0700

Instagram - Pull in photos from Instagram's platform using specific tags to display on your tab.

Basic Settings: Defaults to 8 max photos, and 20 items per page.

By Tag: Enter a Tag Name to designate the specific photos you want displayed and click Add.
By User Feed: Pull in a specific user's pictures. (Must authorize your account to use this option)

Click on Authorize on Instagram.
Enter your Instagram Username and Password and click on Login and Allow Access.
Select By User Feed (now enabled after authorizing.)
Enter any Username whose feed you would like to display on the tab and click Add. (Note: If you want to display your pictures, you must still enter your username into this field)

Select the maximum number of photos to display. Choose from: 1-10, 20, and 40.
Select the number of items to display per page. Choose from: 4, 8, 12, 16, 20, and 40.

Advanced Settings: Defaults to include Like, Pin it, and Tweet buttons.

Include a Facebook Like button, Twitter Tweet button, Pinterest Pin It button, and/or Tumblr button by selecting True, next to the appropriate item. False will exclude that button.

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Embed (Create a microsite using VSML)

Heather C. — Thu, 10 May 2012 14:36:28 -0700

Embed - Click on the Embed button to get the embed code to use on your website.

Click on Embed
Copy the code to your clipboard
Go to your microsite and find the HTML page to which you want to embed your VSML creation and paste it where you want
Refresh to see the tab on the page.

How to set up your Embed code

Now that you've pasted it onto your HTML page, you can edit the following Parameters

Width - By default it will automatically resize to fit in the browser window. If you have a specific size restriction you can change the width from "100%" to whatever pixel width you require for your site.
Height - Default is 1000px, adjust to the height you require for your site.

Pinterest Widget

Heather C. — Mon, 07 May 2012 17:07:20 -0700

Pinterest - Display pins from a board on your Pinterest account on your tab.

Basic Settings:

Enter the URL for the board (not simply the account) that you want to display on the tab. Ex. http://pinterest.com/involversf/visual-smltm/ (This is the default board you will see until you configure with your board.)

Advanced:

Choose to include a "Pin It" button (Default is On)
Choose to include a "Tweet" button (Default is On)
Choose to include a "Facebook Like" button (Default is On)
Enter the max number of Pins to show (Default is 5)
Enter the size (width in pixels) for which you want each tile to be displayed (Default is 192)

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Step 4: Filtered Views (Geo-Targeting and Non-Fan)

Heather C. — Thu, 03 May 2012 15:23:07 -0700

Filtered Views:

Create targeted views of your tab. Users who satisfy the criteria specified in the filter will see an alternate view that you create, rather than the default view.

At the top of the canvas you'll see that you are working within the Default view. Click on the Plus button next to the Default view to create a new view.
Default view is Public.
Double click on the word "Untitled" to edit the name of the view. Press Enter or click else where on the screen to set the change.
Filter view by Country, Language, and/or Fan Gate (a fan-gate view will be seen by non-fans).

Users who have designated that they live in the country or countries you select, speak the language(s) you select, will see this alternate view.
Ex. Create a new view for non-fans that will encourage them to like the page. You can further create a fan view for Germany or for German speaking users, and a non fan view for those same German speaking users by selecting German as the language again, and then also the non-fan option as well if you choose.

Once a new filtered view is created you can delete it by clicking on the (X) next to the name.
Always SAVE your work.

Image Slideshow Widget

Heather C. — Tue, 01 May 2012 11:03:04 -0700

Image Slideshow - Can scroll through each image forward or backward.

Basic Settings: (Defaults to a patterned image.)

Click on Add New Image
Enter a Title for this image
Optional: Enter a URL to make images clickable
Click on Browse to upload an image from your computer
Save

Repeat steps 1-5 above

Most recently added image will appear as featured image

Advanced Settings: (Default number of images to show is 8, Pause time is 5000, Gallery is off, and Manual transition is off)

Enter the number of images to be displayed
To Show Bottom Navigation, select True
To Show Title of Image when its displayed: select True
Enter a message to display if there are no images to be displayed.

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Image Gallery Widget

Heather C. — Tue, 01 May 2012 11:01:43 -0700

Image Gallery - Can scroll through preview images underneath forward or backward, and can select which image to display in the viewer

Basic Settings: (Defaults to a patterned image.)

Click on Add New Image
Enter a Title for this image
Optional: Enter a URL to make images clickable
Click on Browse to upload an image from your computer
Save

Repeat steps 1-5 above if desired.

Most recently added image will appear as featured image

Advanced Settings: (Default number of images to show is 20)

Enter how many images to be displayed
To enable user comments: Select True

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

YouTube Video Widget

Heather C. — Tue, 01 May 2012 10:56:55 -0700

YouTube Video - Displays one video

Basic Settings: (Defaults to Involver's http://www.youtube.com/watch?v=j4w5zDeMs68)

Enter the URL of the video you want to display.
Save Settings

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

YouTube Gallery Widget

Heather C. — Tue, 01 May 2012 10:54:46 -0700

YouTube Gallery - Displays featured video in video viewer and other videos from channel below. Includes Like and Send buttons.

Basic Settings: (Defaults to Involver's Channel: Involverchannel)

Enter your YouTube channel

Import Uploads?
Import Favorites?
Import A Playlist?
Allow user comments?
Hide related videos?

Save Settings
Return to Basic Settings

Set featured video

Advanced Settings: (Defaults to display 6 video options.)

Set the Number of Videos to Display

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Text Tool Widget

Heather C. — Tue, 01 May 2012 10:53:12 -0700

Text Tool - This is a Rich Text Editor with the ability to put in rich text and html anywhere on your tab.

Basic Settings:

Type in your text and style to your preferences
Use to the HTML editor to enter some basic HTML code
Save Settings

Ex: Use above a signup or coupon widget to create a custom header or include text anywhere on your tab.

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Twitter Widget

Heather C. — Tue, 01 May 2012 10:50:41 -0700

Twitter

Basic Settings: (Defaults to Involver's twitter stream: @Involver)

Set Username or Search term
Click the add button to confirm your entry
Optional: Enter another username or search term and repeat
Save Settings

Advanced Settings: (Default is 5 max tweets)

Enter the maximum number of tweets to be displayed. (The width of the container where you place this widget may affect this setting.)

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Social Catalog Widget

Heather C. — Tue, 01 May 2012 10:49:11 -0700

Social Catalog - Display a catalog of products to your customers with links to buy the items. You can import product items from a feed, or add items by locating them on your computer.

Basic Settings: (No default Settings)

Click on Add New Item

Enter Product Information:

Title: Enter in the title of the item here.
Description: Add some information describing your application here.
Image: Add a new image by selecting the blue ‘add new image’ button. Select ‘browse’ and locate the image on your computer. For best results, this image should be a minimum of 220x220. Entering a name and caption is for internal purposes only, does not display externally and is optional.

Enter Product Details:

Price: Enter the price of the product here. For example, enter “€50” to show it’s 50 Euros, “$50” or “50 USD“ to show it’s 50 Dollars, etc.
Buy URL: If the item is available for purchase somewhere on the web, enter in the URL here and the user will be redirected to this location after selecting “Buy Now”.
SCHEDULING – Choose when to publish a specific item as the featured item and when to remove it.

Publish At: Choose when you would like the item published to your catalog as the featured item. Selecting this will generate a calendar pop-up where you will choose a date and time.
Expire At: Choose when you would like the item to appear as ‘expired’ in your catalog. Selecting this will generate a calendar pop-up where you will choose a date and time. Leave this as is to have the item never expire. If you have chosen an expiring date and time, you will also have the option to archive the image after expiration. This will remove the item from public view.

Click ‘save’ at the very bottom in order to save this information.

Click on Import from Feed - If you’d like to pull in your products from a feed, we currently offer this for the following feed types: shopping.com, google(csv), google(xml). Here is a sample of a feed that will successfully populate the application: http://involver.com/social_catalog/shopping.com.chocolates.csv

Product Feed URL: Enter a feed URL from one of the supported feed types.
Product Feed Type: Specify which type of product feed you are using.

Selecting ‘next’ will generate a list of all items located on the feed. Select which items you would like to add to the catalog, as well as whether you want the item to be active (go live right away once saved) or inactive (sent to the archived item’s tab to be made public at a later time). You can also just click on Select all
Once the items have been added, you will be notified. When you are ready, you can close this dialog to return to the settings.

Editing Catalog Settings: Once all your items have been added to the catalog, you can edit them at any time. Each item in the active catalog has five editing options.

Edit: return to the settings for a specific catalog item. For more information on specific settings, see “add new item” above.
Archive: selecting this will remove the item from public view, and send it to your “archived items” tab.
Feature It: selecting this will showcase the item at the top of the application. You may only feature one application at a time. Items that are featured at the top will also appear in the full catalog listed below.
Delete: selecting the ‘x’
Rearrange: select the (?) icon to the left of each item to drag and drop the items into the desired order. The item shown first here will also show first on the application (underneath the feature item, if one is selected).

Catalog Settings:

Image Crop: Images will be cropped vertically by default. If you’d like to crop your images landscape or square, select the preferred option here. Once you choose a different crop style, you will need to return to each item in the catalog individually, select ‘edit’ and then ‘edit’ again next to each image. From here you will crop or re-crop the image to the specified shape.
Show Price in Catalog View: Choose whether or not to display the price you assigned to each image.

Advanced Settings:

Enter Number of Items per Row
Enter Number of Rows to display

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Signup Form Widget

Heather C. — Tue, 01 May 2012 10:45:02 -0700

Signup Form - Includes Initial State for the signup fields and a Success State which allows a new widget to appear upon submission. (Scroll down below the images to view instructions to download your signups.)

Basic Settings: (Default displays signups fields for Email, Full Name, Phone. Only Email is configured when entering the settings)

Optional: Enter the Signup Success Redirect URL and upon completion, users can be automatically directed to a new URL.
Optional: Enter email address if you choose to have entries emailed to you.
Set Max signups per user: Choose from Unlimited, 1, 2, 3, 4, 5, 10, or 15.
Set Allow more signups after: Choose from 1, 2, 3, 4, 5, 6, 7, 14, or 30 days.
Set signup fields (Label, type, and if required to submit)

Email
Address Line 1
Address Line 2
City
Country
Custom Check box

Set default to checked or unchecked

Custom String (One line entry for users)
Custom Text Area (Unlimited character entry for users)
Full Name
Phone (validation included)
State (validation included)
Zip (validation included)

Optional: Select to integrate with Salesforce to have entries directly inputted into your Salesforce account.
Save Settings

Select Success State

Drop another widget to be displayed upon submission into the container that appears and configure as necessary.

Export your Signups:

Click into your Basic Settings for the Signup widget.
Click on the link at the top that says Download Signups for Excel
Save the file to your computer and open in Excel.

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

RSS Feed Widget

Heather C. — Tue, 01 May 2012 10:42:58 -0700

RSS Feed - All stories displayed include Like and Send buttons

Basic Settings: (Defaults to Involver's blog feed: http://blog.involver.com/feed)

Enter the RSS Feed URL (not the URL of the blog site)
Click Add
Save Settings

Advanced Settings: (Default number of story's shown is 5)

Enter the number of stories you want to display. (The width of the container where you place this widget may affect this setting.)

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Pin It Widget (Pinterest)

Heather C. — Tue, 01 May 2012 10:41:03 -0700

Pin It - Place an image for users to pin to their Pinterest boards

Basic Settings:

Enter Image URL to dictate which image form the page you want displayed
Enter Page URL, this will be attached to the image on Pinterest.
Set Pin Count Style to horizontal or vertical. Number of pins will display next to or underneath the Pin button respectively.
Enter Description: This will appear when a user pins this item. (Will not display on the tab)

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Like Widget

Heather C. — Tue, 01 May 2012 10:38:11 -0700

Like - Place a Like or Recommend button anywhere on the tab

Basic Settings: (Defaults to display faces, Like Button, light color scheme, Send button included, Verdana font, Standard Layout Style, and width is 250.)

Show Faces, choose to include users' profile pictures who have clicked on Like or Recommend.
Select which button you want to include: either Like or Recommend
Enter the URL for Like or Recommend button: This is the URL that will display in users' newsfeeds when they click on the button. (Can be linked to the Tab or to an individual content item.)
Set the Color Scheme to be light or dark

Set to Light if your background color or image is of a light color, this setting will make the text darker so it will show up better on the page.
Set to Dark if your background color or image is of a darker color, this setting will make the text lighter so it will show up better on the page.

Choose to include a Send Button or not
Choose your font from the Facebook approved font list.
Choose your style layout; choose between standard, button count or box count style. Click here to get more details about styling the like button.
Enter the px width at which you want this widget to be displayed. (Default is 210px and cannot be made wider, but can be made smaller.)

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Images Widget

Heather C. — Tue, 01 May 2012 10:35:40 -0700

Images

Basic Settings: (Defaults to Involver Visual SML banner image)

Click on Add New Image
Enter a Title for this image
Optional: Enter a URL to make images clickable
Click on Browse to upload an image from your computer
Save

Repeat steps 1-5 above if desired.

If you upload more than one, images will stack one on top of the other, latest image appears on top of others.

Advanced Settings: (Default number of images to show is 1)

Enter how many images to be displayed
To enable Like buttons: Select True
If your image(s) is (are) clickable, to enable the URL to open in a new window: Select True.

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Flickr Slideshow Widget

Heather C. — Tue, 01 May 2012 10:30:29 -0700

Flickr Slideshow - Images will rotate through a slideshow for your users, can scroll through images manually as well. (Defaults to photos from snwbeast)
- Basic Settings:
- Advanced Settings: (Default number of images to show is 8, Pause time is 5000, Gallery is off, and Manual transition is off)

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Flickr Gallery Widget

Heather C. — Tue, 01 May 2012 10:26:43 -0700

Flickr Gallery - Featured picture will display with thumbnails underneath. (Defaults to photos from snwbeast)

Basic Settings:

Enter Flickr User Name (Where is my Flickr Username?)
Optional: Enter Flickr Photoset Id

Advanced Settings:

Allow User Comments?
Enter the number of photos to display in the gallery.

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Coupon Widget

Heather C. — Tue, 01 May 2012 10:15:50 -0700

Coupon - Print and Share buttons will display below coupon image on tab

Basic Settings: (Defaults to Involver image)

Click on Add a New Coupon
Browse your computer to upload an image
Optional: Text Overlay, appears as a clippable coupon with the image on the left and your text on the right.

Enter Header text and Subheader text

Optional: Enter a URL to make the coupon clickable (Not available if you opt to use Text Overlay)

Advanced Settings:

Choose to Hide the Print button. Choose True to hide it, False (Default) to Display.

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Comments Widget

Heather C. — Mon, 30 Apr 2012 17:03:43 -0700

Comments - Place a Facebook Comments widget anywhere on your tab to allow users to engage within your tab.

Basic Settings: (Defaults to 810 width, Light color scheme, and 25 posts allowed to show.)

Set the Width at which you want comments to be displayed. Max width available is 810. (Due to Facebook restrictions, it will always default to 810 however you can set this to be shorter.)
Set the Color Scheme to be light or dark

Set to Light if your background color or image is of a light color, this setting will make the text darker so it will show up better on the page.
Set to Dark if your background color or image is of a darker color, this setting will make the text lighter so it will show up better on the page.

Set the number of posts you want to be displayed at one time. (Comments will display in reverse chronological order, if comments exceed this number, pagination will automatically appear to view more comments from further back.)

Set the look and feel of this widget in the Style settings on the right.

Click on the bar that appears across the top of the widget to select it if you haven't done so already
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.
Settings include the following options:

Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.

Enter any pixel width for the Top, Right, Bottom and Left sides of the widget.

Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)

Headers: Select the font and size of the Headers (titles) in the widget.
Body/Default: Select the font and size of the text that appears in the widget.
Button Text: Select font and size of the button text. (Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).)

Color: Click into the field to enter a hex code, or choose from the color selector that appears.

Background: Color will appear behind this widget specifically.
Border: Color of the border you place around this widget. (Pattern and size of border can be determined below)
Header: Color of any titles.
Body: Color of any text.
Links: Color of any links.
Links (hover): Color any link will change to when the cursor is moved over the link.
Button: Color of any buttons, i.e. Follow or Submit.
Button Text: Color of the text inside the button.

Links: Select Underline or No Underline to designate how links are displayed in the widget.
Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Go to another Widget:

Step 3: Configure Widgets

Heather C. — Wed, 18 Apr 2012 18:16:44 -0700

After arranging your widgets on the tab where you want them to appear, you can configure them to display your specific content, as well as adjust any display options.

To configure any widgets follow the steps listed next, and reference the specific settings for all available widgets below:

On the tab, hover over the widget you wish to configure, click on the drop-down arrow that appears in the upper right corner and select Basic Settings to designate the content you want displayed.
Save your settings.
Hover over the widget again and select Advanced Settings to adjust any display options. Ex. set the number of tweets, stories or images to display or to enable Like Buttons if available.
Click the Orange Save button in the bar at the top and visit your Facebook page to see your changes reflected on the tab.

Here we've configured the images widget on top to look like the top of a piece of cake. We've used the Text Tool to put a header and footer on the page, the footer will remain on all states of this tab. Then we've put a little music video about chocolate in the center using the YouTube Video widget.

Here, you can see that the second tab has been selected and we've arranged our Text Tool, Signup, and Images widgets across two columns configured using the Multi-Column Layout widget to be 45% of the width of the tab on the left and 55% on the right. Also, the signup tab includes a success state (not shown here) that has been configured with out Coupon widget!

On our last tab here we've included a Titter and an RSS Feed, using our Twitter and RSS Feed widgets respectively. The footer is still shown at the bottom and is made clickable using our HTML editor in the Text Tool widget.

Check out the finished product here!

Configuration Settings for Available Widgets:

This is updated weekly to include additions to our product, check back often for new available widgets.

Comments Widget

Coupon Widget

Flickr Gallery Widget

Flickr Slideshow Widget

Image Gallery Widget

Image Slideshow Widget

Images Widget

Like Widget

Pin It Widget (Pinterest)

Pinterest Widget

RSS Feed Widget

Signup Form Widget

Social Catalog Widget

Text Tool Widget

Twitter Widget

YouTube Gallery Widget

YouTube Video Widget

Layout Options:

Two Column: Use this tool to create two containers of equal width that are side by side.
Multi-Column: Use this tool to create any number of columns of any width.
- These containers can be configured to the display 1 or more containers of any width you want on the tab.
- Widgets dropped into these containers will take on the size of the container
Single Dropzone: Use this tool to add one container to the tab. Can be dragged to another spot on the tab as well.
Tabs on Top
- Allows you to create navigation states for your tab
- Configure the number of navigation tabs necessary for your overall tab as well as what you want those navigation tabs to be called. Ex: Home, Photos, Videos, Signup Here!, Contact US, etc.
- After you place this widget on the tab, you can drag any widgets into the space created directly underneath the tabs to design what you want displayed on that tab. Widgets can be moved into or out of a specific tab by dragging them to another container outside of the tabs on top widget.

Watch the Video here of how to Configure your widgets.

Click here to jump to the next section for documentation on our Filtered Views (targeted content).

Step 2: Basic Tab Contruction

Heather C. — Wed, 18 Apr 2012 16:47:36 -0700

This guide is for customers who have been enabled to use Visual SML in their AMP account, have added their Facebook Fan Page to the Social Apps section, and have added a new tab to that page using the steps from the previous section of this documentation. You are now ready to start constructing your tab. Note: as you become more familiar with the tool you may start configuring widgets as you go. For the purposes of getting started, we will be constructing a template of widgets first, styling the tab and then we will move on to the configuration settings in the next section.

Familiarize yourself with the Visual SML tab interface:

Widgets:

In the toolbox on the right you will see your available library of widgets and one "drop here to add widget" container in the template. Start here and add widgets, they can later be rearranged to where you'd like them to go.

You may drag and drop any of your widgets into an open container on the tab

Current default setting will place one container at the top and more containers will appear below each new widget that is dropped in.

Widgets are all pre-configured to default content, much of it is Involver branded. (See below for more info on each widget)

Layouts:

In the toolbox below the widgets you will see your layout tools. These will enable you to create a more complete looking tab.

Two Column: Use this tool to create two containers of equal width that are side by side.
Multi-Column: Use this tool to create any number of columns of any width.

These containers can be configured to the display 1 or more containers of any width you want on the tab.

Hint: You can change the Multi-Column containers into two columns of unequal widths to create a unique display of your widget content.

Widgets dropped into these containers will take on the size of the container

Single Dropzone: Use this tool to add one container to the tab. Can be dragged to another spot on the tab as well.
Tabs on Top

Allows you to create navigation states for your tab
Configure the number of navigation tabs necessary for your overall tab as well as what you want those navigation tabs to be called. Ex: Home, Photos, Videos, Signup Here!, Contact US, etc.
After you place this widget on the tab, you can drag any widgets into the space created directly underneath the tabs to design what you want displayed on that tab. Widgets can be moved into or out of a specific tab by dragging them to another container outside of the tabs on top widget.

Experiment by dragging and dropping different widgets into different size containers for the best overall look.

Style:

Set the look and feel of your tab in the Style settings. Colors, fonts, text size, etc. can be set here, through pre-configured settings or if you there is a designer on hand who knows CSS, there is an Advanced CSS section that can be utilized as well. Style set here will be reflected in all widgets. (Style settings on a per-widget basis are detailed below.)

App Padding: Designate how much space you want in between the border and your widget content.
App Background Color: Select a color that will appear behind your widgets. Note that some widgets such as the Twitter Feed and RSS Feed widgets (ones that use text as the main content) have transparent backgrounds, and the background color will show through.
Display App Background Image?: Check the box to upload an image from your computer that will appear beneath your widgets but on top of your background color.

Image can be set to:

Repeat (will cover entire tab)
No Repeat (only one instance of the image will appear.
Repeat Horizontally (will span across the top of the entire tab)
Repeat Vertically (will run along the left side of the entire tab)

App Border: Choose the size, pattern, and color for a border that will wrap around the entire tab.

Size range: 1px-5px and 10px
Patterns: Solid, Dotted, Dashed, Inset, Outset, Double

Headers: Select the font and color of the Headers (titles) on your page. If the header is all a link, style settings for Links will be used instead.
Body/Default: Select the font and color of the text that appears on your page. This will be used for any text content pulled in from Twitter or RSS Feed widgets, etc.
Links: Select Underline or No Underline to designate how links are displayed on the tab, then select a color for these links.
Links (Hover): Select Underline or No Underline to designate how links are displayed in a hover over state to create a unique experience for users.
Button Color: Select a color for any buttons that might appear on the tab. Only certain widgets contain buttons, i.e. Twitter (Follow) and Signup (Submit).
Button Text: Select Font, Color and Size of the button text.
Advanced CSS: Use this to create a more complex look on the tab that is not limited to the choices offered by the pre-set style options. Any settings entered here will override any settings made in the options above.

Style Individual Widgets:

Set the look and feel of each widget separately in the Style settings on the right.

Hover over the widget you wish to style and click on the bar that appears across the top of the widget to select it.
Next click on the Style tab in the toolbox to the right.

Minimize Page by clicking the bar and click into Current Widget to open a new set of styling options for that widget.

Settings include the following options:
- Padding: Create space around the content of the widget to alter how it appears in respect to the widget's border and background.
- Margin: Create space around the entire widget, including the padding, to alter how it will appear next to other widgets.
- Font: Set the font and size for any text that might appear in the widget. (Note: Does not apply to all widgets.)
- Color: Click into the field to enter a hex code, or choose from the color selector that appears.
- Links: Select Underline or No Underline to designate how links are displayed in the widget.
- Border: Choose the size and pattern for a border that will wrap around the individual widget including the padding but excluding the margin.
- Advanced CSS: Use this to create a more complex look of the widget that is not limited to the choices offered by the pre-set widget styling options. Any settings entered here will override any settings made in the options above.

Watch the Video here of how to construct your tab.

Once you are finished constructing your tab, you can begin to configure your widget content.

Recent posts | Support

Google Analytics on VSML Tabs

What data is being tracked for which widgets?

Video Contest Widget

Go to another widget:

Photo Contest Widget

Go to another widget:

Instagram Widget

Go to another Widget:

Embed (Create a microsite using VSML)

Embed - Click on the Embed button to get the embed code to use on your website.

How to set up your Embed code

Pinterest Widget

Go to another Widget:

Step 4: Filtered Views (Geo-Targeting and Non-Fan)

Image Slideshow Widget

Go to another Widget:

Image Gallery Widget

Go to another Widget:

YouTube Video Widget

Go to another Widget:

YouTube Gallery Widget

Go to another Widget:

Text Tool Widget

Go to another Widget:

Twitter Widget

Go to another Widget:

Social Catalog Widget

Go to another Widget:

Signup Form Widget

Go to another Widget:

RSS Feed Widget

Go to another Widget:

Pin It Widget (Pinterest)

Go to another Widget:

Like Widget

Go to another Widget:

Images Widget

Go to another Widget:

Flickr Slideshow Widget

Go to another Widget:

Flickr Gallery Widget

Go to another Widget:

Coupon Widget

Go to another Widget:

Comments Widget

Go to another Widget:

Step 3: Configure Widgets

Check out the finished product here!

Configuration Settings for Available Widgets:

Layout Options:

Watch the Video here of how to Configure your widgets.

Step 2: Basic Tab Contruction

Widgets:

Layouts:

Experiment by dragging and dropping different widgets into different size containers for the best overall look.

Style:

Style Individual Widgets:

Watch the Video here of how to construct your tab.