Friendbuy lets you deploy widget targeting so you can serve different widgets to your users based on certain criteria. For example, display Widget A on the order confirmation page if the user purchases a promotional product, otherwise display Widget B.

Follow these simple steps to achieve this functionality.

Step 1:

Create the two widgets in your Friendbuy account (i.e. Widget A and Widget B).

For the sake of this tutorial, let’s consider we have these two widgets.

Widget A code:


 window['friendbuy'] = window['friendbuy'] || [];
 window['friendbuy'].push(['widget', “n0-ONE”]);

Widget B code:


 window['friendbuy'] = window['friendbuy'] || [];
 window['friendbuy'].push(['widget', “n0-TWO”]);

Notice the widget identifiers as “n0-ONE” and “n0-TWO” for widgets A and B respectively.

Step 2:

Add conditional logic on the page you want these widgets to appear. Two ways of handling this are shown below.

The simplest approach is to replace the widget code based on the necessary condition.


    window['friendbuy'] = window['friendbuy'] || [];
    window['friendbuy'].push(['widget', “n0-ONE”]);
 
 
{% else %}

    window['friendbuy'] = window['friendbuy'] || [];
    window['friendbuy'].push(['widget', "n0-TWO”]);

Another approach is a bit more concise. In the widget push call, you can simply pass the CSS selector of the div where you want the widget to pop-up as the third parameter as shown:


    window['friendbuy'] = window['friendbuy'] || [];
{% if promotional-product-is-purchased %}
    window['friendbuy'].push(['widget', "n0-ONE”, “.friendbuy-post-purchase-widget”]);
{% else %}
     window['friendbuy'].push(['widget', "n0-TWO”, “.friendbuy-post-purchase-widget”]);
{% endif %}

Notice above that we are passing in .friendbuy-post-purchase-widget (which is the CSS selector of the div where we want the widget to pop-up) as the third parameter. There are further optimizations possible within this approach, such as assigning the widget ID to a variable and populating its value based on the condition.