Docs / Retention & Support Teams

Embedded Capture Forms (In-App)

Embed the capture form directly inside your application's billing page using our JS snippet.

Don't have a billing page in your app?

No problem. Adding an embeddable Churn Buster "Capture" form allows users to click a button to pop up a form, enter payment information, and send it securely through to your payment processor (Stripe or Braintree).

Instructions

First, add the embed script to your page. We recommend adding this right before the closing body tag.

EXAMPLE:

<script type="text/javascript">
  (function(account, customer) {
    ChurnBuster = window.ChurnBuster || {};
    ChurnBuster.captureAttributes = {
      account: "ACCOUNT_UUID",
      customer: "STRIPE_CUSTOMER_ID",
      source: "stripe"
    };
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.async = true;
    script.src = "https://proxy-assets.churnbuster.io/v3/scripts.js";
    var insert = document.getElementsByTagName("script")[0];
    insert.parentNode.insertBefore(script, insert);
  })();
</script>

Note: you will need to provide your Churn Buster account ID, available here.
You'll also need to make sure the Stripe/Braintree customer ID is dynamically loaded on the page.

Next, to open the modal, add a "data-capture" attribute to any clickable element on the page.

EXAMPLE:

<button data-capture>Update your payment information</button>

When these two steps are completed, you should be able to click the element to see the Capture modal.

FAQ

Q: Is there a way to control the form/iframe placement?

There isn't a supported way to render the Capture form inline.

Q: Are there any patterns or scripts that don't require the click?

Yes! We provide additional ways to control the display of the Capture form. You can use ChurnBuster.showCapture() to programmatically show the modal without a click. We also provide ChurnBuster.hideCapture() to hide the modal.