Address Book Assist Widget - Implementing the Widget


The Address Book Assist Widget widget is already implemented in our pre-built eCommerce platform integrations and may also be implemented on any website by a 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
vaultEnvironmentKeyComes 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 = {
                version: 2,
                apiBaseUrl: '{{apiBaseUrl}}',
                apiAccessToken: '{{apiAccessToken}}',
                vaultEnvironmentKey: '{{spreedlyEnvironmentKey}}',
                customerId: '{{customerId}}',
                themeName: 'my-custom-theme-name',
                modals: {
                    // ...
                }
            };
            // Call widget init()
            AddressBookAssist.init(widgetConfig);

            var address = {
                "id": 54321,                // Required - SP address ID
                "environmentId": 2345,      // Required - SP environment ID
                "customerId": 12345,        // Required - SP customer ID
                "firstName": 'Joe',         // Required - first name of the customer
                "middleName": 'A',
                "lastName": 'Jones',        // Required - last name of the customer
                "company": 'Stuff',
                "street1": '123 St',
                "street2": 'Apt B',
                "city": 'Baltimore',
                "region": 'MD',
                "postcode": '21224',
                "country": 'United States',
                "phone": '123-456-7890',
            };

            // Create an address - newAddress is the address returned from Subscribe Pro API containing the new SP address ID
            const newAddress = await AddressBookAssist.onAddressCreated({address});

            // Update an existing address
            AddressBookAssist.onAddressUpdated({
                "previousAddress": {
                    "id": "1212121212",
                    "environmentId": "989889898",
                    // ...
                },
                "newAddress": {
                    "id": "1212121212",
                    "environmentId": "989889898",
                    // ...
                }
            });

        </script>
    </body>
</html>