Skip to main content

Display inline / embedded social proof

Natan Abramov avatar
Written by Natan Abramov
Updated this week

ProveSource supports embedding your social proof in your website pages and designing them as you see fit.

This feature is especially useful for some use-cases, for example showing recent sales of a product in a Shopify product page just under the product price.

The ProveSource code snippet must be loaded in the page

This can be done by adding an HTML code to your page template, basic example without extra params:

<div class="provesrc-inline" data-notification="recent sales">
</div>

Required attribute, one of:

data-notification="notification name" 
OR
data-notification-id="id"

More complex example with optional attributes/parameters:

<div class="provesrc-inline" 
  data-notification="recent sales" 
  data-product-id="12345"
  data-animation="slide-left" 
  data-icon="trophy" 
  data-loop="true"
  data-wait-for="5"
  data-random="false"
  data-template="{{count}} people bought this product in the last {{timeText}} ({{timeAgo}})">
</div>

Attribute options (optional):

  • data-product-id: the specific product ID of events you want to show, e.g. specific product sale (do not use if you want to show all conversions).

  • data-animation: entry animation for the events, possible values: fade, slide-left, slide-right, slide-up, slide-down

  • data-icon: prefix the message with an emoji, possible values: 🔥 fire, 🏆 trophy, 👍🏼 thumbsup, ✅ check, ⭐ star, ❤️ heart, 🚀 rocket, 🔔 bell, ✨ sparkles, 🎁 gift, 🛒 cart, 👀 eye, 💰 money, ⏰ time, 📈 trending, 🆕 new

  • data-wait-for: how long to display each message (if there are multiple)

  • data-loop: loop the messages (i.e. restart display if there are multiple)

  • data-random: show messages in a random order (if there are multiple)

  • data-template: specify the text template for the social proof, read more about the available variables here, if no template is set the Notification "Message" will be used. Also the element's inner content can be used:
    ​<div class="provesrc-inline" data-notification="sales">{{name}} just bought our product {{timeAgo}}</div>

Some platforms have their own templates and might overwrite your message template, for this we support different delimiters for you to use:

  • {{ variable }}

  • {% variable %}

  • %% variable %%

  • [[ variable ]]

Shopify embed example

Go to Shopify Admin → Online Store → Themes → [Your current theme] → Actions → Edit Code

Select of these files:

  • sections/main-product.liquid

  • sections/product-information.liquid

  • snippets/product-template.liquid

Add the following HTML code where you'd like to show your social proof (be sure to update the data-notification:

<div class="provesrc-inline" data-notification="Shopify Sales" data-product-id="{{ product.id }}"></div>
Did this answer your question?