Skip to main content
All CollectionsIntegrations
Integrating ProveSource with Kartra Pages
Integrating ProveSource with Kartra Pages

Adding ProveSource to your Kartra landing pages is easy as pie.

Yosi Dahan avatar
Written by Yosi Dahan
Updated over 3 years ago

To make ProveSource work with Karta, usually you need to:

  1. Install the code in the Kartra pages

  2. Integrate Kartra to ProveSource to send purchases information

Install

(This is taken from Kartra's help pages)

There are two ways to embed your own HTML or JavaScript code into the canvas:

  1. Dragging a custom-code section into the canvas

  2. Dragging a custom-code component into a section

You will find both options in the sidebar, under the area “Your code”:

Once dragged into the canvas, in order to access their respective source code editor, click on the CODE icon for sections, and on the PENCIL icon for components:

Once you’ve clicked on the CODE or the PENCIL icon as explained above, you will trigger the actual HTML/JavaScript editor.

Now, here’s the important thing to remember: Kartra needs to differentiate your custom code from the rest, and for that reason you need to wrap your HTML/JavaScript within the following DIV:

<div data-embed="true"> YOUR CODE GOES HERE </div>

The crucial bit is the “data-embed” parameter. Anything inside that DIV wrapper will be identified by Kartra Pages as your own custom code, which in return will allow the system to render it correctly once you publish the page online. Otherwise it won’t work correctly.

You can embed that DIV wrapper anywhere in the code you want. For example:

Now, after adding your DIV wrapper, go grab your ProveSource snippet, and paste it between the <DIV></DIV> tag.
​
Save your changes!

Integration

Kartra checkout page is usually an embedded iframe and is secured, so you can't add the ProveSource code into the checkout page to track purchases.

Here are a few options to track purchases from Kartra with ProveSource

(use only 1 of the below):

Kartra IPN (Recommended)

Use Kartra's automatic payment notifications to send data to ProveSource webhooks:

  1. In ProveSource, edit/create a notification that tracks "webhooks" and copy the webhook URL (read more about it here)

  2. Paste the webhook URL in Kartra's IPN settings (read more here)

Custom Checkout Page

Create a custom checkout page in the My Pages area.

After creating the checkout page, click on Settings from the left-side menu of the page builder and select Tracking Code and paste your ProveSource code.

When adding your ProveSource code, make sure to delete the <script> tags and the <!-- Start of Async ProveSource Code --> <!-- End of Async ProveSource Code --> tags.

Zapier

use Zapier to connect Kartra with ProveSource, read more here:

Outbound API / Webhook

use Kartra's Outbound API with ProveSource's webhooks:

  1. In ProveSource, edit/create a notification that tracks "webhooks" and copy the webhook URL (read more about it here)

  2. Go to Kartra My Integrations and pick Outbound API

  3. Enable the Outbound API and paste the ProveSource webhook URL there

  4. Pick the relevant event to send to ProveSource

Did this answer your question?