zygote-plugin-active-campaign

Zygote Plugin Active Campaign

This plugin is the integration of Zygote and Active Campaign

UNDER DEVELOPMENT

---

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

   View Example

   {
     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

   View Example

   {
     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

   View Example

   {
       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

   View Example

   {
       abandonOffset: 5
   }

5. automationConfig - custom configuration for automations

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

   View Example

   {
       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

Active Campaign Documentation

Zygote Cart Documentation