Direct Implementation

Learn how to implement ProofIt directly in your website's code for maximum control and flexibility.

Overview

Direct implementation gives you the most control over how ProofIt is loaded and configured on your website.

Prerequisites

  • A ProofIt API key
  • Access to edit your website's HTML
  • Basic understanding of JavaScript

Basic Implementation

Add the ProofIt script to your website's <head> section:

<script src="https://cdn.proofit.com/js/proofit.min.js"></script>
<script>
  window.ProofIt.init({
    apiKey: 'YOUR_API_KEY',
    // Additional configuration options
  });
</script>

Asynchronous Loading

For better performance, load ProofIt asynchronously:

<script>
(function(w,d,s,o,f,js,fjs){
  w['ProofitObject']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
  js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
  js.async=1;js.src=f;fjs.parentNode.insertBefore(js,fjs);
}(window,document,'script','proofit','https://cdn.proofit.com/js/proofit.min.js'));

proofit('init', {
  apiKey: 'YOUR_API_KEY'
});
</script>

Implementation Notes

  • Script Placement: Place the script as early as possible in the <head> section
  • API Key: Keep your API key secure and never expose it in client-side code
  • Error Handling: Implement proper error handling for script loading failures

Advanced Configuration

Customize ProofIt's behavior with advanced configuration options:

window.ProofIt.init({
  apiKey: 'YOUR_API_KEY',
  analytics: {
    platform: 'google-analytics',
    propertyId: 'G-XXXXXXXXXX'
  },
  templates: {
    recentPurchase: {
      position: 'bottom-right',
      theme: 'light'
    }
  },
  rules: {
    displayDelay: 2000,
    minPurchases: 5
  }
});

Troubleshooting

  • Script not loading: Check your browser's console for errors
  • API key issues: Verify your API key is correct and active
  • Integration problems: Ensure all required configuration options are set