Advanced configuration

Initialising Upzelo

There are a couple of ways of using Upzelo, you can opt to not manually set up click event listeners as Upzelo will do this by default on either a button or a with the ID of cancel. If opting to use this method (not recommended) You will need to add a second script tag to initialize Upzelo.

// Upzelo config object
const config = {
    customerId: 'cus_1234',
    subscriptionId: 'sub_1234',
};

window.upzelo.init(config);

By doing this, Upzelo will be triggered and display the Flow that has been assigned to the customer.

Usage with SPA

Integrating Upzelo with your SPA (single-page application) is simple.

Include the script tag from the installation guide in your main template file, then inside your components, use the window.upzelo.open function with an Upzelo Configuration Object to launch Upzelo.

Content Security Policy

If you're running a CSP inside your application, then you'll need to allow Upzelo customer flows to serve images, fonts, and scripts. You'll also need to allow connections back to our servers. Please apply the following directives to your configuration:

• image-src assets.upzelo.com

• font-src assets.upzelo.com

• script-src assets.upzelo.com

• connect-src upzelo.com events.upzelo.io

Optionally, you may decide to add assets.upzelo.com to a default-src, to cover the 3 types in one.