Merge pull request #26 from ikbenben/features/intercom-settings

feat: adding config object for messenger attributes

README.md

@@ -41,10 +41,12 @@ const defaults = {
   appId: null, // Intercom ID
   autoBoot: true, // True to boot messenger widget and show UI on page load, false to allow manually booting later
   debug: false, // True to show debug messages in the console, useful for development, false to not show them
-
+
+  config: {}, // Object to specify messenger attributes to configure when booting. see https://developers.intercom.com/installing-intercom/docs/javascript-api-attributes-objects#section-messenger-attributes
+
   scriptId: 'intercom-script', // String to identfy the script tag, for vue-meta
   scriptDefer: false, // True to defer loading intercom widget javascript until page loads, false to async load it in document flow
-    
+
   updateOnPageRoute: true // True to call intercom's 'update' method on route change, false to not do this
 };
 ```

example/nuxt.config.js

@@ -1,7 +1,7 @@
 const { resolve } = require('path')
 
 module.exports = {
-  mode: 'spa',
+  ssr: true,
   rootDir: resolve(__dirname, '..'),
   buildDir: resolve(__dirname, '.nuxt'),
   head: {

lib/Intercom.js

@@ -1,6 +1,7 @@
 export default class Intercom {
   appId;
   debug;
+  config;
   ready;
   unreadCount;
   userData;
@@ -10,6 +11,7 @@ export default class Intercom {
   constructor (appId, settings = {}, { userData = {} } = {}) {
     this.appId = appId
     this.debug = settings.debug || false
+    this.config = settings.config || {}
     this.ready = false
     this.unreadCount = 0
     this.userData = userData
@@ -57,6 +59,11 @@ export default class Intercom {
     if (!window.intercomSettings) { window.intercomSettings = {} }
     window.intercomSettings.app_id = this.appId
 
+    Object.keys(this.config).forEach((key) => {
+      const snakeCaseKey = key.replace(/([A-Z])/g, '_$1').toLowerCase()
+      window.intercomSettings[snakeCaseKey] = this.config[key]
+    })
+
     return this._updateData('boot', userData)
   }
 

lib/defaults.js

@@ -3,6 +3,8 @@ const defaults = {
   autoBoot: true, // True to boot messenger widget and show UI on page load, false to allow manually booting later
   debug: false, // True to show debug messages in the console, useful for development, false to not show them
 
+  config: {}, // Object to specify messenger attributes to configure when booting. see https://developers.intercom.com/installing-intercom/docs/javascript-api-attributes-objects#section-messenger-attributes
+
   scriptId: 'intercom-script', // String to identfy the script tag, for vue-meta
   scriptDefer: false, // True to defer loading intercom widget javascript until page loads, false to async load it in document flow
 

lib/plugin.js

@@ -4,11 +4,12 @@ const appId = '<%= options.appId %>';
 const autoBoot = <%= options.autoBoot || false %>;
 const debug = <%= options.debug || false %>;
 const pageTracking = <%= options.updateOnPageRoute || false %>;
+const config = <%= options.config ? JSON.stringify(options.config) : '{}' %>;
 let $intercom = null;
 let intercomInstalled = false;
 
 export default function (ctx, inject) {
-  $intercom = new Intercom(appId, { debug });
+  $intercom = new Intercom(appId, { debug, config });
   inject('intercom', $intercom);
 
   const intercomAppMixin = {

test/Intercom.test.js

@@ -95,6 +95,16 @@ describe('Intercom.js', () => {
       )
     })
 
+    test('can boot with messenger attributes', () => {
+      const config = { customLauncherSelector: '.intercom-btn', hideDefaultLauncher: true }
+
+      intercom = new Intercom(appId, { config })
+      intercom.boot()
+
+      expect(global.window.intercomSettings.custom_launcher_selector).toEqual('.intercom-btn')
+      expect(global.window.intercomSettings.hide_default_launcher).toEqual(true)
+    })
+
     test('can change appId on boot', () => {
       const newAppId = 'newId123'
       intercom.boot({ app_id: newAppId })