AddShoppers Help Desk

Support Center

How To Integrate Purchase Sharing Without The Immediate Popup

Last Updated: Jan 24, 2014 03:52PM EST

If you want to allow (and encourage!) customers to share after they have made a purchase, but you don't want to display a popup immediately after sharing (which the Purchase Sharing app does by default), you can accomplish this with our standard buttons combined with your Purchase Sharing code and a nifty <div>. Here's an example:

Thanks for your purchase! Share with your friends for a coupon for your next order!

Here's how you can do this on your own site:

  1. Create a <div> for your sharing buttons and call to action.
  2. Style the <div> and add your call to action text.
  3. Add whichever AddShoppers sharing buttons you want to the <div>.
  4. Add your Purchase Sharing code, but change the auto attribute to false.

You'll end up adding 3 elements to your checkout success page:

  1. A <div> with your call to action text and some AddShoppers sharing buttons.
  2. The CSS to make it look pretty.
  3. And your purchase sharing code to configure the share.

Here's the HTML + CSS to create the sharing widget above:

HTML
<div class="purchase_sharing">
   <p>Thanks for your purchase! Share with your friends for a coupon for your next order!</p>
   <div class="share-buttons share-buttons-panel" data-buttons="twitter,facebook,google,email,pinterest" data-counter="true" data-hover="false" data-oauth="true" data-promo-callout="left" data-style="medium"></div>
</div>
CSS - feel free to grab this and edit to match your site
div.purchase_sharing {
    background-color: #F2FFF3; 
    border: 1px solid #DCF5DD; 
    border-radius: 5px; 
    padding: 8px; 
    text-align: center; 
    width: 400px;
}
div.purchase_sharing p {
    font-size: 14px; 
    font-weight: bold; 
    color: #2CB030; 
    margin: 0 0 5px 0;
}

Here's what your Purchase Sharing code should look like:

<script type="text/javascript">
AddShoppersTracking = {
    auto: false,
    header: "SHARING POPUP HEADER HERE",
    image: "URL OF IMAGE TO BE SHARED",
    url: "URL TO BE SHARED",
    name: "SHARE TITLE HERE",
    description: "SHARE DESCRIPTION HERE"
}
</script>

Contact Us

  • Please use the floating chat bubble in the bottom right hand side of your screen to initiate a request.

http://assets3.desk.com/
false
addshoppers
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete