Setting up an Upsell Form

Sometimes you may want to upsell your clients on a service while they’re checking out from a specific form without breaking their flow. To achieve this, you’re able to use our Upsell feature by following the example below.

1. Set up an “Upsell” custom page in your templates and insert the following code into it:

{% extends "portal.layouts.narrow" %}

{% block content %}
	<div class="text-center">
        <h1 class="mb-5">Special Offer!</h1>
        <p>Would you like to buy this extra service for just <strong>$99</strong>?</p>
        <div class="mt-5 flex justify-center items-center gap-4">
            <a href="/pay/service/31" class="btn btn-primary btn-lg btn-block mb-4 mt-4" data-pjax>
                Yes, buy now!
            </a>
            <a href="/portal" class="text-muted">No, thanks.</a>
        </div>
	</div>
{% endblock %}

Where you’d replace /pay/service/31 with the service number you’d like instead of 31. You can also adjust the wording and pricing accordingly.

2) Add the following code into your clients/receipt.twig template to redirect the user to the upsell between {% block left %} and {% endblock %}:

{% if invoice.reason == 'orderFormIdWithUpsell' %}
		<script>window.location = '/portal/page/upsell';</script>
	{% endif %}

Where “orderFormIDWithUpsell” is replaced with the order form’s ID where you want the upsell to occur.

If you want to upsell after a cart checkout, use this code instead:

{% if invoice.reason == 'cp_cart' %}
	<script>window.location = '/portal/page/upsell_2';</script>
{% endif %}

If you want to trigger the upsell if certain services were purchased, you can do so like this:

{% if invoice.reason == 'cp_cart' and 5 in invoice.items|column('service_id') %}
	<script>window.location = '/portal/page/upsell_2';</script>
{% endif %}

When this is set up correctly, after your client checks out from the above-mentioned form, they will get a window asking them if they’d like to buy XYZ service and if they click yes, they’re redirected to another checkout.

Automatic form submission

If you want to improve conversion, you can add the following JS snippet anywhere after line 41 in public/pay_invoice.twig.

{% if invoice.invoice_items|filter(item => item.service_id == 123)|length %}
		<script>
            document.addEventListener("spp.form.preview", function(e) {
                document.querySelector('input[data-type="stripe_card"]').checked = true;
                document.querySelector('#payment-form button[type="submit"]').click();
    		});
		</script>
	{% endif %}

Make sure to change the service ID with the ID of the service you want to upsell.