Address Book Assist Widget - Implementing the Widget

The Address Book Assist Widget widget is already implemented in our pre-built e-commerce 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 MySubscriptions 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>