Address Book Assist Widget


The Address Book Assist Widget is already implemented in our pre-built eCommerce platform integrations. The widget may also be implemented on any website by qualified web developer.

Steps To Implement

  1. Authenticate with Subscribe Pro API - Server Side
  2. Create a Page on Your Website with JavaScript Tags for the Widget

Authenticate with Subscribe Pro - Server-Side

Follow the instructions for server-side authentication step for the My Subscriptions Widget.

Create a Page on Your Website with JavaScript Tags for the Widget

Insert the Subscribe Pro JavaScript tags onto the Address Books page(s) of your website.

Template Variables

These values should be determined server-side and plugged into the HTML template below to render a page for the client.

apiAccessTokenAccess token returned by /oauth/v2/token
environmentKeyComes in response with access token - This is the spreedly_environment_key field
customerIdSubscribe Pro unique customer ID

Page Template

<html>
<head>
</head>
<body>

<div>
Main Body Content - This is the Address Book Page on Your Site
</div>

<div id="sp-address-book-widget"></div>

<!-- Load the Subscribe Pro widget script -->
<script type="text/javascript" src="https://static.subscribepro.com/address-book/widget-address-book-1.0.1.js"></script>

<!-- Pass configuration and init the Subscribe Pro widget -->
<script>
    // Setup config for Subscribe Pro
    var widgetConfig = {
        element: 'sp-address-book-widget',
        apiBaseUrl: '{{apiBaseUrl}}',
        apiAccessToken: '{{apiAccessToken}}',
        environmentKey: '{{spreedlyEnvironmentKey}}',
        customerId: '{{customerId}}',
        theme: 'my-custom-theme-name',
    };
    // Call widget init()
    AddressBookAssist.init(widgetConfig);

    newAddress = {
        "address": {
            "customer_id": "989889898",     // Required - Subscribe Pro Customer ID
            "is_default_billing": false,    // Required
            "is_default_shipping": false,   // Required
            "first_name": "Joe",            // Required
            "middle_name": "A",
            "last_name": "Jones",           // Required
            "company": "Stuff",
            "street1": "123 St",
            "street2": "Apt B",
            "city": "Here",
            "region": "MD",
            "postcode": "21231",
            "country": "United States",
            "phone": "123-456-7890"
        }
    };

    AddressBookAssist.onAddressCreated(newAddress).then(function (result)) {
        // result.id contains the SP address ID
    };

    AddressBookAssist.onAddressUpdated({
        "prev_address": {
            "address_id": "1212121212",
            "customer_id": "989889898",
            // ...
        },
        "address": {
            // ...
        }
    });

    AddressBookAssist.onAddressDeleted({
        "address": {
            "address_id": "1212121212",
            "customer_id": "989889898",
            // ...
        }
    });
</script>
</body>
</html>