Skip to main content

Web Integration Guide

The Web SDK provides a seamless way to integrate Accrue wallet functionality into your website or web application with minimal code changes. The integration is designed to be lightweight, non-intrusive, and highly customizable.

SDK Components​

The Accrue Web SDK consists of two main components:

Customizing Wallet UI
The core wallet interface where users can manage their funds, deposits, and payments. Only appears when triggered, fully customizable, and handles authentication.
Trigger Component
Opens the wallet frontend when clicked. Comes as a floating button by default, but can be customized or replaced with your own UI elements.

Wallet Frontend Defaults

  • Only appears when triggered by user action
  • Fully customizable to match your brand
  • Handles user authentication and wallet operations

Trigger Component Defaults

  • Default is a floating button in the right bottom corner
  • Can be customized or replaced with your own UI elements
  • Position, style, and behavior are configurable

Implementation Options​

You have multiple options for integrating the Web SDK into your website. We recommend using the direct integration method for optimal performance, but also support integration via Google Tag Manager for those who prefer that approach.

Direct Script Integration
The most straightforward method - include our script directly in your HTML for optimal performance and control.
Google Tag Manager
Use Google Tag Manager to deploy and manage the SDK if you prefer using a tag management solution.

Direct Script Integration​

The most straightforward integration method is to include our script directly in your HTML:

<script
  data-script="accrue-savings-embed"
  defer
  src="https://embed[-sandbox].accruesavings.com/main.js"
  data-merchant-id="{your-merchant-id}"
></script>

Key Points:

  • Include this script in the <head> section of your HTML
  • Replace {your-merchant-id} with your unique Merchant ID from Accrue
  • Use the defer attribute to ensure the script doesn't block page rendering
  • For testing, use the sandbox environment by including -sandbox in the URL
  • For production, remove the [-sandbox] part from the URL

Google Tag Manager Integration​

If you prefer using Google Tag Manager (GTM), follow these steps:

  1. Log in to your GTM account and select your container
  2. Create a new tag with the "Custom HTML" tag type
  3. Add the following HTML code:
<script>
  window.accrueEmbedConfig = {
    merchantId: "{your-merchant-id}"
  };
</script>

<script
  data-script="accrue-savings-embed"
  defer
  src="https://embed[-sandbox].accruesavings.com/main.js">
</script>
  1. Set the trigger to fire on all pages (or specific pages where you want the wallet to appear)
  2. Save, submit, and publish your changes

User Data Integration​

To associate your existing user data with the Accrue wallet, you can implement event listeners:

document.addEventListener('AccrueEmbed::Ready', () => {
  // Provide user data from your system
  window.accrueEmbed.onGetUserData(() => {
    return {
      referenceId: '123e4567-e89b-12d3-a456-426614174000', // Your unique user ID
      email: 'user@email.com',                            // User's email
      phoneNumber: '+1212559999',                         // User's phone (optional)
    };
  });

  // Handle successful sign-in
  window.accrueEmbed.onSignIn((payload) => {
    console.log(payload);
    // {
    //   id: '497f6eca-6276-4993-bfeb-53cbbbba6f08',        // Accrue user ID
    //   referenceId: '123e4567-e89b-12d3-a456-426614174000', // Your reference ID
    //   isNewUser: true,                                   // Whether this is a new user
    // }
  });
});

This integration allows you to:

  • Pass your user identifiers to Accrue
  • Link your user records with Accrue user accounts
  • Receive notifications when users sign in
  • Track whether users are new or returning