Collecting customer and contact data with ChartMogul.js

Add a snippet to your web app to automatically collect user data and store it in ChartMogul.

ChartMogul.js is a code snippet you add to your web app to automatically create and update customer and contact records in ChartMogul. Each time an authenticated user accesses your app, ChartMogul captures their details, such as name, email, and company, with no need for a manual import or custom integration.

The data collected by ChartMogul.js is stored in the source you select during setup. Use the information to filter and segment customers, enrich profiles with user-level details like last seen date and location, and give your sales team up-to-date contact data to work from.

How it works

Once installed, ChartMogul.js runs each time an authenticated user accesses your app to:

ChartMogul stores the data in the source you select during setup. You can use an existing source or create a new one specifically for data collected from ChartMogul.js. Creating a separate source may result in duplicate customer records. You can set up an automation to merge duplicate customers.

During setup, we recommend specifying a trusted domain to restrict data collection to that domain only. Without it, the snippet could be used from any domain to create or update records in your account.

Setting up ChartMogul.js

  1. Go to Settings > ChartMogul.js.
  2. Under Source, select where you want to store customer and contact data.
  3. In the Trusted domain field, enter your app’s domain (e.g., mycompany.com) to restrict data collection to that domain only. All subdomains (e.g., app.mycompany.com, blog.mycompany.com) are included automatically.
  4. Click CREATE.

ChartMogul displays a code snippet pre-filled with your unique app ID to copy and paste into your app.

The status shows as Inactive until ChartMogul detects the snippet running in your app. It changes to Live once ChartMogul starts receiving data.

Installing ChartMogul.js in your app

The installation process depends on your application type: single-page app (SPA) or traditional multi-page app (MPA).

Single-page app (SPA)

Paste the following snippet within the <head> element:

<script>
  window.chartMogulConfig = {
    app_id: '[app ID]'
  };

  window.ChartMogul = window.ChartMogul || function (...args) {
    (window.ChartMogul.q = window.ChartMogul.q || []).push(args);
  };
</script>
<script src="https://cdn.chartmogul.com/chartmogul.js" async></script>

Sign-in

After the user signs in, execute an init action:

window.ChartMogul('init', {
  company_account_id: '[unique identifier of the user company]',
  company_name: '[user company name]',
  user_email: '[user email]',
  user_full_name: '[user first and last name]',
})

The init action sets the default values for subsequent update actions.

The above snippet includes placeholder fields. Replace them with dynamic values containing the user’s data. See the list of available options.

Every time the user navigates to a new page, ChartMogul.js automatically executes an update action to keep the contact’s activity data up to date. To disable this, set navigation_tracking: false in window.chartMogulConfig.

To manually execute an update action, use:

window.ChartMogul('update', {...})

You can include additional options to update values that have changed. Options from the previous init action are sent automatically, so there’s no need to repeat them.

Sign-out

After the user signs out, execute a destroy action:

window.ChartMogul('destroy')

This action resets the default values specified in the init action.

Multi-page app (MPA)

Paste the following snippet within the <head> element on every page that requires users to be signed in:

<script>
  window.chartMogulConfig = {
    app_id: '[app ID]',
    company_account_id: '[unique identifier of the user company]',
    company_name: '[user company name]',
    user_email: '[user email]',
    user_full_name: '[user first and last name]',
  };

  window.ChartMogul = window.ChartMogul || function (...args) {
    (window.ChartMogul.q = window.ChartMogul.q || []).push(args);
  };
</script>
<script src="https://cdn.chartmogul.com/chartmogul.js" async></script>

The snippet includes placeholder fields. Replace them with dynamic values containing the user’s data. See the list of available options.

Available configuration options

Field Type Description Required
app_idStringYour app ID. The field is pre-filled.Yes
company_account_idStringCustomer’s external ID. Used to match an existing customer record.Yes
company_nameStringCustomer’s company name.Yes
user_emailStringContact’s email address. Used to match an existing contact within the customer record.Yes
company_lead_created_atTimestampTimestamp indicating when the company became a lead, in the ISO 8601 format.No
company_free_trial_started_atTimestampTimestamp indicating when the company’s free trial started, in the ISO 8601 format.No
user_first_nameStringContact’s first name.No
user_last_nameStringContact’s last name.No
user_full_nameStringContact’s full name. An alternative to providing the first and last names separately.No
user_signed_up_atTimestampTimestamp in the ISO 8601 format indicating when the user first created an account in your app.No
navigation_trackingBooleanSpecifies whether to send an automatic update action every time the user navigates to a new page. Accepts true (default) or false. Learn more.No

Updating your ChartMogul.js configuration

If you need to change your source, trusted domain, or app ID, go to Settings > ChartMogul.js and follow the instructions below.

Updating the source

To change the source, select a new source from the Source drop-down and click UPDATE.

From this point on, all data will be added to the new source. Contact and customer records already created in the previous source will not be moved or deleted.

Changing the source may result in duplicate customer records. You can set up an automation to merge duplicate customers.

Updating the trusted domain

To change the domain, enter a new domain in the Trusted domain field and click UPDATE.

After you change the trusted domain, ChartMogul immediately stops accepting data from the previous domain. Make sure your snippet is running on the new domain, or data collection will be interrupted.

When you change the domain, the status changes to Inactive until ChartMogul receives new data.

Regenerating your app ID

To invalidate the existing ID and create a new one, click REGENERATE and confirm the action in the dialog.

Regenerating your app ID will immediately break any existing installations of the snippet. You’ll need to update the snippet in your app with the new app ID before data collection resumes.

When you regenerate your app ID, the status changes to Inactive until ChartMogul receives new data.