Zygote Plugin Active Campaign

This plugin is the integration of Zygote and Active Campaign

:construction: UNDER DEVELOPMENT :construction:

Installation

With npm:

npm install --save zygote-plugin-active-campaign

Or with Yarn:

yarn add zygote-plugin-active-campaign

What does the plugin do

On the preInfo hook:

• Creates/Updates a contact resource
• Creates/Updates eCommerce customer resource
• Creates/Updates order with an abandoned cart flag

On the postOrder hook:

• Updates the created abandoned cart order

Deep Data Integration

The plugin focuses on creating deep data integrations through Active Campaign

Deep Data Integration - Active Campaign

Configuration

On the index the same file that your Cart is being imported from Zygote, import the plugin:

import * as ZygoteAC from "zygote-plugin-active-campaign"

Inject the plugin in the cart:

<Cart
    plugins={[ZygoteAC]}
/>

On componentDidMount() initialize the AC plugin by sending in the configurations(view details below about the data expected):

componentDidMount() {
  ZygoteAC.init(config, devConfig, pluginConfig, defaultConfig, automationConfig)
}

Initialization Parameter objects description:

1. config - Active Campaign account configuration specifications:

   | Property Name | Data Type | Description | | -------------------- | --------- | ---------------------------------- | | serviceName | string | Name of the service | | serviceLogoUrl | string | url to logo of service | | proxyUrl | string | url that points to proxy | | origin | string | origin of requests | | host | string | hosting site |

   {
     serviceName: `MyCompanyOne`,
     serviceLogoUrl: `https://www.mycompanyone.com/media/logo.png`,
     proxyUrl: `https://www.mycompanyone.com/api/3/`,
     origin: `https://www.mycompanyone.com/`,
     host: `www.mycompanyone.com`,
   }

2. devConfig - define sandbox url and set it to run on dev mode

   | Property Name | Data Type | Description | | -------------------- | --------- | ----------------------------------| | proxyDevUrl | string | url for the sanbox account | | devOrigin | string | url for the instance running dev | | isDevMode | boolean | sets plugin to run on dev mode | | isLogging | boolean | enables built in console logs |

   {
     proxyDevUrl: `https://mysandboxacct.netlify.com/dev/api/3/`,
     devOrigin: `https://mydevinstance.netlify.com`,
     isDevMode: true,
     isLogging: true
   }

3. pluginConfig - displaying, styling and custom configurations of plugin

   | Property Name | Data Type | Description | | ---------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- | | acceptsMarketing | boolean | Set checkbox to start checked/unchecked | | color | string | HEX value of the checkbox | | text | string | Display text for the opt-in | | hasFullImageUrl | boolean | Set to true if products have a full url, else it will auto concat the site url or devurl if it is on isDevMode | | addAbandonedTag | boolean | Automatically adds an abandoned tag to the contact when a cart is abandoned, and removes it when the order is completed |

   {
       acceptsMarketing: true,
       color: `#182A42`,
       text: `I would like to receive emails and updates about my order and special promotions`,
       hasFullImageUrl: true,
       addAbandonedTag: true
   }

4. defaultConfig - default configurations for the plugin to run based on

   | Property Name | Data Type | Description | | -------------------- | --------- | ------------------------------------------------------------------------------ | | abandonOffset | number | Offset time in minutes from current time that a cart is flagged as abandoned |

   {
       abandonOffset: 5
   }

5. automationConfig - custom configuration for automations

   | Property Name | Data Type | Description | | -------------------- | --------- | -------------------------------------------------------------- | | clearAutomations | boolean | clear contact from all automations after checkout is completed |

   {
       clearAutomations: true
   }

Proxy Setup

The Active Campaign API requires API requests to come from a proxy or a server.

For Netlify you can setup a proxy on your netlify.toml file (docs).

Add the following to your netlify.toml file:

[[redirects]]
  from = "/api/3/:params/:id/:subquery"
  to = "https://<account-name>.api-us1.com/api/3/:params/:id/:subquery"
  status = 200
  force = true
  [redirects.headers]
    Api-Token = "<AC-API-KEY>"

[[redirects]]
  from = "/api/3/:params/:id"
  to = "https://<account-name>.api-us1.com/api/3/:params/:id"
  status = 200
  force = true
  [redirects.headers]
    Api-Token = "<AC-API-KEY>"

[[redirects]]
  from = "/api/3/:params"
  to = "https://<account-name>.api-us1.com/api/3/:params"
  status = 200
  force = true
  [redirects.headers]
    Api-Token = "<AC-API-KEY>"

# Optional if you want to be able to run pointing to a Sand Box
[[redirects]]
  from = "/dev/api/3/:params/:id/:subquery"
  to = "https://<account-name>.api-us1.com/api/3/:params/:id/:subquery"
  status = 200
  force = true
  [redirects.headers]
    Api-Token = "<AC-SANDBOX-API-KEY>"

[[redirects]]
  from = "/dev/api/3/:params/:id"
  to = "https://<sandbox-account-name>.api-us1.com/api/3/:params/:id"
  status = 200
  force = true
  [redirects.headers]
    Api-Token = "<AC-SANDBOX-API-KEY>"

[[redirects]]
  from = "/dev/api/3/:params"
  to = "https://<sandbox-account-name>.api-us1.com/api/3/:params"
  status = 200
  force = true
  [redirects.headers]
    Api-Token = "<AC-SANDBOX-API-KEY>"

For additional info on Proxy setup on Netlify:

Netlify - Rewrites and Proxying

Netlify - Toml Reference

Additional Docs

:loudspeaker: Active Campaign Documentation

:shopping_cart: Zygote Cart Documentation