Any ShopSocially campaign can be rendered through the click of a button embedded on the webpage. The configuration needed to place and hook up the In-Page button properly on the targeted web page are explained in this document. 

Configuring the In-Page button

The In-Page button can be implemented in two ways:

  • Using a native element of your webpage.
  • In-page button introduced dynamically.

Using a native element of your webpage: 
You can use a native element of your webpage as a trigger for the App. Whenever a visitor clicks on that image/ link/ logo, you need to use ShopSocially's ss_mi.show_app() function to call the appropriate App container. Below is a list of functions to be used for each type of App.

App Call
Get-A-Fan ss_mi.show_app( 'getafan_app')
Offer App ss_mi.show_app( 'offer_app')
Refer A Friend App ss_mi.show_app( 'real_refer_a_friend_app')
Purchase Share App ss_mi.show_app( 'purchase_share_app')
Social Buzz App ss_mi.show_app( 'social_buzz_app')
Ask A Friend App ss_mi.show_app( 'ask_friend_app')
Shopping Community App ss_mi.show_app( 'shopping_community_app')
Social Connect App ss_mi.show_app( 'social_connect_app')
Social Seo App ss_mi.show_app( 'social_seo_app')
Share And Win App ss_mi.show_app( 'share_and_win_app')
Get An Email App ss_mi.show_app( 'get_an_email_app')
Photomonials App ss_mi.show_app( 'photomonials_app')

Please note: When using a native element of your website, you need to make sure that the campaign targeting allows the App to pop-up on that page. Otherwise, visitors will click on the link/image/ logo, but no campaign will be triggered.

In-page button introduced dynamically: In this type of implementation, the button is not a part of your webpage originally, but is introduced dynamically when the script runs. You need to place a div tag on your webpage as a container element for that button. Additionally a Javascript code needs to be entered within the App configuration. This code is executed when the targeting conditions for the campaign are satisfied on any of the pages. That is how the button is introduced dynamically on the page.
Please note: The button will be displayed only if the targeting conditions for that campaign are satisfied.

To add the JavaScript code, please follow the steps given below:
1. Login in to Merchant Centre.
2. In Merchant Centre, click Campaigns.
3. Select the appropriate campaign, you want to set up the In-Page button for.
4. In the campaign, click Configuration.
5. Click Advanced tab. 
6. In Advanced tab, navigate to, and select Display in-page Button check box. Refer to Figure: Advanced Tab. This is an example for Refer-A-Friend campaign.

Figure: Enabling in-page button

7. JS Code For Placing Button: You will need to enter the required JavaScript code. A sample code for the Refer-A-Friend campaign is given below.

var button_html = '<div style="position: absolute; right: [set distance from right, example 224px;] top: [set distance from top, example 158px;] cursor: pointer;" onclick="ss_mi.show_app(\'real_refer_a_friend_app\')"><img src="insert your button source here" /></div>';

Please note:
1. The 'raf_container' in the above example refers to the ID of the div tag inserted on your webpage
2. The ss_mi.show_app(\'real_refer_a_friend_app\') function is specific to the refer-a-friend app. To write the JS code for any of the other apps use the appropriate function. The list of functions for each app is given in the table earlier in this document.
8. After you place the JavaScript code, click Save.

Below is an example how the In-Page button will work and how the visitor will see and use it. Refer to Figure: In-Page Button.

In-Page Button for Refer-a-friend

When visitor clicks the In-Page button, the Refer-A-Friend App will load.