Before configuring Social Connect, make sure you have completed all mandatory integration. For tutorial on the above integration, please refer to Integrating ShopSocially.

 

Refer to Figure: Configuring Social Connect for configuration flow.


Figure: Configuring Social Connect



Adding New Campaign

You can add new campaigns using the Adding New Campaign button.
Please follow the steps given below:
  1. Login into Merchant Center.  
  2. Click Campaigns tab. 
  3. Click Add New Campaign tab. Refer to Figure: Adding New Campaign.  
  4. Select and click available campaign, or from available campaigns.

Figure: Adding New Campaign


Configuring the campaign


When you add a new campaign you will be taken to the configuration setup. Refer to Figure: Configuration Tabs.


Figure: Configuration Tabs


There are various tabs in the Configuration set up. Setup for each tab is given in following sections.


Please note: In Basic tab, you can choose any one of the two available templates and the configuration fields will change accordingly. This document explains the configuration fields for both the templates in separate sections.


The two available templates are as given below:


Configuring the Elegant Template

Setup for each tab is explained below.


The tabs are as given below:

  • Basic 
  • Advanced 
  • Mobile

Basic

The Basic tab is for setting template, incentive info, offer display, and sidebar display.


Please follow steps given below:

1. In Template, in Background Template Name, select Elegant Template. Refer Figure: Elegant Template.


Figure: Elegant Template


2. In Incentive Info, provide:

  • Type of Incentive: Choose one any one type of incentive:
1. Generic coupon code: Same coupon code for everyone. 
2. Single use coupon code: Each user gets a unique coupon code. 
3. Instant Win: Each user will be instantly informed if they have won one of the uploaded incentive skins.
4. Custom Sweepstakes: You can run a sweepstakes offer in return for people connecting and sharing with your site.
5. No Incentive: If you want to run the campaign without giving away any incentives. Avoid using the No Incentive option.
The coupon codes have to be generated in your shopping cart and uploaded here. The App will simply display whatever is uploaded here. For Generic Coupon Codes, enter the coupon code that will be given to each user. For single use coupon codes, enter one coupon code per line. If you have a list of coupon codes in a spreadsheet you can copy paste the column there. The App will give out the codes to the users sequentially. The 'Get Status' button can be used to check how many codes are used up and how many are remaining. The App will be auto paused when all the coupons are used up. You will receive automated notifications when the coupons are close to exhaustion.
  • Coupon Codes (one per line)
  • Coupon Expiry
  • Terms & Conditions Text
  • When to trigger incentive?: The incentive can be given to the user on one of these two conditions:
  1. Immediately upon Connect: Incentive is shown as soon as the user does a Facebook Connect. The coupon can be displayed immediately.  
  2. When friends make a purchase: Incentive coupon is emailed to the user only after a certain number of the user's friends make a purchase. This option can be used to enable kickback scenarios.
3. In Default Offer Display, provide:

  • Incentive Image (450 x 80 pixels): Image to display at the top of the Social Connect App when the Default Offer Display mode is active. This image explains the details of the offer to the user. 
  • Offer Image (170 x 160 pixels): Image to display on the left when the Default Offer Display mode is active. This image typically shows products related to this offer.  Please note: When Social Connect is shown in Product Offer Display mode, this standard offer image will be replaced by the image of the product that is extracted from the page using the Product Extraction JavaScript Code.
  • Offer Title
  • Facebook Post Description Text
  • Landing Page URL
  • Sharing Question. Refer to Figure: Default Offer Display 1 as to how a visitor will see.

Figure: Default Offer Display 1

4. In Sidebar Display, provide:

Figure: Sidebar Image 1

  • Popup Border Color: The color value in this field is assigned to the border. Match this border color to a prominent color on your website. For example, color values for green can be entered in this box as follows: 
RGB HEX format: #00FF00
RGB Decimal format: rgb(0,255,0)
Color Name format: green
Other basic color keywords are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Advance color formats may also be entered in this field as described in the W3C Color Standards DocumentHowever, while these advanced color formats may work perfectly on advanced browsers, they may result in a degraded experience (For example, no transparency) on older browsers. Use a paint tool on your computer to determine the best RGB color to use for your website. Refer to Figure: Popup Border Color 1.

Figure: Popup Border Color 1

  • Sidebar Color: If you are using transparent image, configure sidebar color accordingly here. For non-transparent image, recommended setting for sidebar color is "transparent". Refer to Figure: Sidebar Image above.
  • Display Type: Select Slider or Popup.
5. Click Save.

Refer to Figure: Shared On Facebook 1, which depicts the post shared by visitor on Facebook.

Figure: Shared On Facebook 1


Advanced

The Advanced tab is for setting slider options, newsletter subscription, product offer display, Facebook sharing, customization, and page load optimization.


Please follow steps given below:

1. In Slider Optionsprovide:

  • Auto Slide-in Time: The time in seconds after page load when the Social Connect slider or popup appears. The Social Connect behavior is controlled by setting values as follows:
blank = slider or popup will show immediately 0 = slider or popup will show immediately
-1 = slider or popup will always display in minimize mode. User must click on sidebar or the in-page button to display slider or popup
5 = Any non-zero number is the time in seconds. Slider will be displayed after that many seconds.

Set this field to 5 if you are seeing an increase in bounce rate on your site. This will ensure that the slider or popup will show only after the users has decided to stay on your site.
  • Don't show the app after user is converted: If selected, this Social Connect campaign is not shown again after a user has interacted with this campaign once. If the user converts as above, neither the sidebar nor the slider or popup are shown again for 30 days. However, this flag applies only to this campaign. If a new campaign is invoked, the campaign will not be suppressed.
  • Slider Placement: The slider can be placed either on the right or the left of the browser window. If you choose the slider display type as popup, then this option will not apply.
  • Display Sidebar: This option controls whether or not you want to display the sidebar. It is selected by default. If you clear this check box, a sidebar will not be displayed. Please note: You should clear this check box, only if you select the Display In-Page Button option. Otherwise, once the user minimizes the Social Connect popup or slider, there will be no way to bring it back.
  • Facebook Share Button text: Control the text of the Facebook Share button shown in the Social Connect App. Maximum 25 characters. Refer to Figure: Facebook Share Button 1.

Figure: Facebook Share Button 1

  • Display in-page Button: The Social Connect App can be triggered with an in-page button. Checking this box will trigger a JavaScript code that will insert a button of your choice dynamically on your webpage at a location of your choice.  Please note: this is an advanced option and it will require you fill the field JS code for placing button. Refer to Social Connect In-Page Button for detailed instruction and the JS code.
  • Vertical Offset from middle (in pixels): Use this field if you want the slider to move up or down on the page. Specify the offset in pixels to move the slider up or down.
  • Add-on Text below the Coupon Code: A message to be shown below the coupon after unlock. Maximum 50 characters. Refer to Figure: Add-on Text Below The Coupon Code 1.

Figure: Add-on Text Below The Coupon Code 1


2. In Newsletter Subscription, provide:
  • Enable Newsletter Subscription: This field decides whether to show the Newsletter opt-in option. Select this check box to show the Newsletter opt-in option.
  • Newsletter Subscription Opt-in Default: This field decides whether the Newsletter opt-in option is selected by default. If this check box is selected, the newsletter option is an opt-in. If this check box is cleared, the newsletter option is an opt-out.
  • Newsletter Subscription Text
3. In Product Offer Display, provide:
  • Incentive Image (450 x 80 pixels): Image to display at the top of the Social Connect App when the Product Offer Display mode is active. This image explains the details of the offer to the user.
  • Product Extraction JavaScript Code: The Social Connect App needs to know how to extract the product information from the current page. A data extraction JavaScript is used to extract key pieces of product information, such as product title, product image, and product URL. For example refer to Figure: JavaScript Code Snippet 1. Please note: If this field is left blank or the JavaScript code is unable to extract the variables mentioned above, then the Product Offer Display section is never invoked and the Social Connect App always falls back on the Default Offer Display section.

Figure: JavaScript Code Snippet 1

  • Facebook Post Description Text: This is the text that shows up in the body of the Facebook message after the user completes the sharing on Facebook.
4. In Facebook Sharing, provide:
  • Facebook Sharing Default: This field decides the Facebook sharing check box. By default, it is selected and sharing is an opt-in. If you clear this, sharing is an opt-out.
  • Facebook Sharing Text
  • Minimum Comment Length
5. In Customization, provide:
  • Coupon Unlock Message 
  • Terms Label 
  • Terms Alt Text 
  • Email Label 
  • Email Alt Text 
  • Copy Label 
  • Copy Alt Text 
  • Coupon Thankyou HTML. 
  • Coupon Code Heading. Refer to Figure: Customization 1.

Figure: Customization 1

  • Coupon Copied Text 
  • Coupon Copied Heading 
  • Coupon Copied Ok Label 
  • Sending Email Text 
  • Email Sent Heading 
  • Email Sent Text 
  • Email Not Sent Text. Refer to Figure: Customization 2.

Figure: Customization 2


6. In Page Load Optimization, provide: 
  • Remove Fancy Libraries: Select this check box if you do not want the coupon code to be allowed to copy and paste. If you select this check box, then the visitor will be able to copy the coupon code and paste it on the check out page or where the visitor is prompted to provide it. Visitor can also copy and paste the coupon code to a notepad or a word file. Please note: It is recommended that you do not select this check box. Refer to Figure: Copy Coupon Code 1.

Figure: Copy Coupon Code 1


7. Click Save
 
Mobile

The Mobile tab is for setting mobile sidebar text, and mobile incentive image.


Please follow steps given below:

1. In Mobile Options, provide:

  • Mobile Sidebar Text 
  • Display Bottombar: Select Display Bottombar check box to display bottombar on mobile. 
  • Bottombar Color 
  • Mobile Sidebar Text Color 
  • Mobile Incentive Image (280 x 170 pixels)
2. Click Save. 


Configuring the Vibrant Template

Setup for each tab is explained below.


The tabs are as given below:

  • Basic 
  • Advanced 
  • Mobile


Basic


The Basic tab is for setting template, incentive info, offer display, and sidebar display.


Please follow steps given below:

1. In Template, in Background Template Name, select Vibrant Template. Refer to Figure: Vibrant Template.


Figure: Vibrant Template


2. In Incentive Info, provide:

  • Type of Incentive: Choose one any one type of incentive:

1. Generic coupon code: Same coupon code for everyone.


2. Single use coupon code: Each user get a unique coupon code.


3. No Incentive: If you want to run the campaign without giving away any incentives. Avoid using the No Incentive option.


The coupon codes have to be generated in your shopping cart and uploaded here. The App will simply display whatever is uploaded here. For Generic Coupon Codes, enter the coupon code that will be given to each user. For single use coupon codes, enter one coupon code per line. If you have a list of coupon codes in a spreadsheet you can copy paste the column there. The App will give out the codes to the users sequentially. The 'Get Status' button can be used to check how many codes are used up and how many are remaining. The App will be auto paused when all the coupons are used up. You will receive automated notifications when the coupons are close to exhaustion.

  • Coupon Code Image (250 x 60 pixels): This is the background image for the coupon code. Refer to Figure: Coupon Code Image.

Figure: Coupon Code Image


  • Coupon Codes (one per line) 
  • Coupon Expiry 
  • Terms & Conditions Text 
  • When to trigger incentive?The incentive can be given to the user on one of these two conditions:
1. Show upon Facebook Connect: Incentive is shown as soon as the user does a Facebook Connect. The coupon can be displayed immediately.
2. When friends make a purchase: Incentive coupon is emailed to the user only after a certain number of the user's friends make a purchase. This option can be used to enable kickback scenarios.
3. In Default Offer Display, provide:
  • Incentive Image (140 x 270 pixels) 
  • Background Image (490 x 330 pixels) 
  • Offer Title 
  • Facebook Post Description Text 
  • Landing Page URL 
  • Sharing Question. Refer to Figure: Default Offer Display 2.

Figure: Default Offer Display 2


4. In Sidebar Display, provide:


Figure: Sidebar Image 2


  • Popup Border Color: The color value in this field is assigned to the border. Match this border color to a prominent color on your website. For example, color values for green can be entered in this box as follows:

RGB HEX format: #00FF00


RGB Decimal format: rgb(0,255,0)


Color Name format: green

Other basic color keywords are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Advance color formats may also be entered in this field as described in the W3C Color Standards Document. However, while these advanced color formats may work perfectly on advanced browsers, they may result in a degraded experience (For example, no transparency) on older browsers. Use a paint tool on your computer to determine the best RGB color to use for your website. Refer to Figure: Popup Border Color 2.


Figure: Popup Border Color 2


  • Sidebar Color: If you are using transparent image, configure sidebar color accordingly here. For non-transparent image, recommended setting for sidebar color is "transparent". Refer to Figure: Sidebar Image above.
  • Display Type: Select Slider or Popup.

5. Click Save.


Refer to Figure: Shared On Facebook 2, which depicts the post shared by visitor on Facebook.


Figure: Shared On Facebook 2


Advanced

The Advanced tab is for setting slider options, newsletter subscription, product offer display, Facebook sharing, customization, and page load optimization.


Please follow steps given below:


1. In Slider Options, provide:

  • Auto Slide-in Time: The time in seconds after page load when the Social Connect slider or popup appears. The Social Connect behavior is controlled by setting values as follows:

blank = slider or popup will show immediately 0 = slider or popup will show immediately


-1 = slider or popup will always display in minimize mode. User must click on sidebar or the in-page button to display slider or popup


5 = Any non-zero number is the time in seconds. Slider will be displayed after that many seconds.


Set this field to 5 if you are seeing an increase in bounce rate on your site. This will ensure that the slider or popup will show only after the users has decided to stay on your site.

  • Don't show the app after user is converted: If selected, this Social Connect campaign is not shown again after a user has interacted with this campaign once. If the user converts as above, neither the sidebar nor the slider or popup are shown again for 30 days. However, this flag applies only to this campaign. If a new campaign is invoked, the campaign will not be suppressed.
  • Slider Placement: The slider can be placed either on the right or the left of the browser window. If you choose the slider display type as popup, then this option will not apply.
  • Display Sidebar: This option controls whether or not you want to display the sidebar. It is selected by default. If you clear this check box, a sidebar will not be displayed. Please note: You should clear this check box, only if you select the Display In-Page Button option. Otherwise, once the user minimizes the Social Connect popup or slider, there will be no way to bring it back.
  • Facebook Share Button text: Control the text of the Facebook Share button shown in the Social Connect App. Maximum 25 characters. Refer to Figure: Facebook Share Button 2.


Figure: Facebook Share Button 2


  • Display in-page Button: The Social Connect App can be triggered with an in-page button. Checking this box will trigger a JavaScript code that will insert a button of your choice dynamically on your webpage at a location of your choice. Please note: this is an advanced option and it will require you fill the field JS code for placing button. Refer to Social Connect In-Page Button for detailed instruction and the JS code.
  • Vertical Offset from middle (in pixels): Use this field if you want the slider to move up or down on the page. Specify the offset in pixels to move the slider up or down.
  • Add-on Text below the Coupon Code: A message to be shown below the coupon after unlock. Maximum 50 characters. Refer to Figure: Add-on Text Below The Coupon Code 2.

Figure: Add-on Text Below The Coupon Code 2


2. In Newsletter Subscription, provide:

  • Enable Newsletter Subscription: This field decides whether to show the Newsletter opt-in option. Select this check box to show the Newsletter opt-in option.
  • Newsletter Subscription Opt-in Default: This field decides whether the Newsletter opt-in option is selected by default. If this check box is selected, the newsletter option is an opt-in. If this check box is cleared, the newsletter option is an opt-out.
  • Newsletter Subscription Text

3. In Product Offer Display, provide:

  • Incentive Image (450 x 80 pixels): Image to display at the top of the Social Connect App when the Product Offer Display mode is active. This image explains the details of the offer to the user.
  • Product Extraction JavaScript Code: The Social Connect App needs to know how to extract the product information from the current page. A data extraction JavaScript is used to extract key pieces of product information, such as product title, product image, and product URL. For example refer to Figure: JavaScript Code Snippet 2. Please note: If this field is left blank or the JavaScript code is unable to extract the variables mentioned above, then the Product Offer Display section is never invoked and the Social Connect App always falls back on the Default Offer Display section.

Figure: JavaScript Code Snippet 2


  • Facebook Post Description Text: This is the text that shows up in the body of the Facebook message after the user completes the sharing on Facebook.
4. In Facebook Sharing, provide: 
  • Facebook Sharing Default: This field decides the Facebook sharing check box. By default, it is selected and sharing is an opt-in. If you clear this sharing is an opt-out.
  • Facebook Sharing Text
  • Minimum Comment Length
5. In Customization, provide:

  • Coupon Unlock Message  
  • Terms Label  
  • Terms Alt Text  
  • Email Label  
  • Email Alt Text  
  • Copy Label  
  • Copy Alt Text  
  • Coupon Thankyou HTML.  
  • Coupon Code Heading. Refer to Figure: Customization 3.

Figure: Customization 3


  • Coupon Copied Text
  • Coupon Copied Heading
  • Coupon Copied Ok Label
  • Sending Email Text
  • Email Sent Heading
  • Email Sent Text
  • Email Not Sent Text. Refer to Figure: Customization 4.

Figure: Customization 4


6. In Page Load Optimization, provide:

  • Remove Fancy Libraries: Select this check box if you do not want the coupon code to be allowed to copy and paste. If you select this check box, then the visitor will be able to copy the coupon code and paste it on the check out page or where the visitor is prompted to provide it. Visitor can also copy and paste the coupon code to a notepad or a word file. Please note: It is recommended that you do not select this check box. Refer to Figure: Copy Coupon Code 2.

Figure: Copy Coupon Code 2


7. Click Save.

Mobile

The Mobile tab is for setting mobile sidebar text, and mobile incentive image.

Please follow steps given below:
1. In Mobile Options, provide:
  • Mobile Sidebar Text  
  • Display Bottombar: Select Display Bottombar check box to display bottombar on mobile.  
  • Bottombar Color  
  • Mobile Sidebar Text Color
  • Mobile Incentive Image (280 x 170 pixels)
2. Click Save.