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.
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.
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>';
1. The 'raf_container' in the above example refers to the ID of the div tag inserted on your webpage2. 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.
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.