{"_id":"59f96cde95274b00246da6f4","project":"5746675a5aa03c0e00fce9bc","version":"5746675a5aa03c0e00fce9bf","category":"59f96cd129b4d600246c2899","user":"545988354f86a50800f9cce4","updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-11-01T06:42:38.949Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"Integrations.js makes it dead simple to add integrations to your site without having to build, test, and implement them from scratch each time.\n\nThe library is open source, and you can [view integrations.js on Github](https://github.com/blockspring/integrations-js).\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Supported Integrations\",\n  \"body\": \"As of today, integrations.js supports the following integrations out of the box:\\n\\n- **Google Sheets**: let users sign in with Google, and export data from your page into Sheets.\\n- **Trello**: let users sign in with Trello, and create cards given data on your page.\\n- **Clearbit**: let users sign in with Clearbit, and lookup profile information about people mentioned on your page.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Getting Started\"\n}\n[/block]\nThis tutorial will help you start adding integrations to your site using the Integrations.js library. As soon as you’re setup you’ll be able to turn on any new integration with the flip of a switch!\n\n## Step 1: Choose Integrations\nInstalling Integrations.js is easy. First, [visit your Integrations.js dashboard](https://www.integrationsjs.com/dashboard) and toggle the integrations you want activated on your site.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/bd77fe9-Screen_Shot_2017-11-05_at_10.41.55_PM.png\",\n        \"Screen Shot 2017-11-05 at 10.41.55 PM.png\",\n        1290,\n        658,\n        \"#388de3\"\n      ],\n      \"border\": true\n    }\n  ]\n}\n[/block]\n## Step 2: Copy the Snippet\nNow you can copy/paste the Integrations.js library and JS snippet into your site, wherever you'd like to see the integrations. Here's a sample code snippet.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n  (function(){\\n    var integrations=window.integrations=window.integrations||[];if(integrations.loaded){return}if(integrations.invoked){return}integrations.invoked=true;integrations.methods=[\\\"identify\\\",\\\"setContext\\\",\\\"set\\\",\\\"get\\\",\\\"do\\\"];integrations.factory=function(method){return function(){var args=Array.prototype.slice.call(arguments);args.unshift(method);integrations.push(args);return integrations}};for(var i=0;i<integrations.methods.length;i++){var key=integrations.methods[i];integrations[key]=integrations.factory(key)}integrations.load=function(siteId){integrations.siteId=siteId;var script=document.createElement(\\\"script\\\");script.type=\\\"text/javascript\\\";script.async=true;script.src=\\\"https://cdn.integrationsjs.com/dist/boot.js\\\";var first=document.getElementsByTagName(\\\"script\\\")[0];first.parentNode.insertBefore(script,first)};\\n\\n    // Load Integrations.js with your API key\\n    integrations.load('API_KEY_HERE');\\n\\n    // Identify the user by their unique ID\\n    integrations.identify({\\n      userId: 'UNIQUE ID FOR USER' // email/username/userid\\n    });\\n\\n    // Call setContext whenever the context of the page changes\\n    // This can be called any number of times\\n    integrations.setContext({\\n      people: [{\\n        email: 'jason:::at:::blockspring.com',\\n        name: 'Jason Tokoph'\\n      }],\\n      title: 'So many integrations, so little time',\\n      description: 'Take a look at integrationsjs.com',\\n      datasets: {\\n        foo: [['name', 'age'], ['jason', 29]]\\n      }\\n    });\\n  })();\\n</script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nIf you enabled Clearbit, and pasted this code snippet into your site with the proper API token in your account, then you've completed your first integration. You should see Clearbit enabled on your site.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/692d4a8-Screen_Shot_2017-11-05_at_11.07.52_PM.png\",\n        \"Screen Shot 2017-11-05 at 11.07.52 PM.png\",\n        730,\n        1076,\n        \"#7d947d\"\n      ],\n      \"border\": true\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Context\"\n}\n[/block]\nYou can power integrations by passing data into the `integrations.setContext` method.\n\n## Export integrations\nExport integrations let users export data from your site into apps like Google Sheets. The typical usecase is for reporting.\n\nThese integrations require you to pass a `datasets` context. You can pass multiple tables to export into the `datasets` context. Each table must be an array of arrays, and a named key.\n\nThe below example shows an export integration with a single 'invoices' dataset:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" integrations.setContext({\\n    datasets: {\\n      invoices: [\\n        ['name', 'bill'],\\n        ['jason', 29],\\n        ['christy', 12]\\n      ]\\n    }\\n  });\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n## Workflow integrations\nWorkflow integrations let users complete workflows without leaving your site - like creating a Trello card using data from your page.\n\nThese integrations require you to pass a `title` and `description` context. For instance, if you're using the Trello integration it'll prefill the 'create a card' page with the title and description you provide.\n\nThe below example shows a workflow integration context:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" integrations.setContext({\\n    title: 'So many integrations, so little time',\\n    description: 'Take a look at integrationsjs.com',\\n  });\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n## View integrations\nView integrations let users access to their own data (or 3rd party) from your site - like seeing a user's profile from a CRM or internal system.\n\nThese integrations require you to pass a `people` context. You can pass multiple people, as long as each is an object with an 'email' key.\n\nThe below example shows a view integration context:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" integrations.setContext({\\n   people: [{\\n     email: 'jason@blockspring.com'\\n   }, {\\n     email: 'willis@example.com'\\n   }],\\n  });\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"Integrations.js documentation and quickstart.","slug":"integrations-js","type":"basic","title":"Integrations.js Overview","__v":0,"parentDoc":null,"childrenPages":[]}

Integrations.js Overview

Integrations.js documentation and quickstart.

Integrations.js makes it dead simple to add integrations to your site without having to build, test, and implement them from scratch each time. The library is open source, and you can [view integrations.js on Github](https://github.com/blockspring/integrations-js). [block:callout] { "type": "info", "title": "Supported Integrations", "body": "As of today, integrations.js supports the following integrations out of the box:\n\n- **Google Sheets**: let users sign in with Google, and export data from your page into Sheets.\n- **Trello**: let users sign in with Trello, and create cards given data on your page.\n- **Clearbit**: let users sign in with Clearbit, and lookup profile information about people mentioned on your page." } [/block] [block:api-header] { "title": "Getting Started" } [/block] This tutorial will help you start adding integrations to your site using the Integrations.js library. As soon as you’re setup you’ll be able to turn on any new integration with the flip of a switch! ## Step 1: Choose Integrations Installing Integrations.js is easy. First, [visit your Integrations.js dashboard](https://www.integrationsjs.com/dashboard) and toggle the integrations you want activated on your site. [block:image] { "images": [ { "image": [ "https://files.readme.io/bd77fe9-Screen_Shot_2017-11-05_at_10.41.55_PM.png", "Screen Shot 2017-11-05 at 10.41.55 PM.png", 1290, 658, "#388de3" ], "border": true } ] } [/block] ## Step 2: Copy the Snippet Now you can copy/paste the Integrations.js library and JS snippet into your site, wherever you'd like to see the integrations. Here's a sample code snippet. [block:code] { "codes": [ { "code": "<script>\n (function(){\n var integrations=window.integrations=window.integrations||[];if(integrations.loaded){return}if(integrations.invoked){return}integrations.invoked=true;integrations.methods=[\"identify\",\"setContext\",\"set\",\"get\",\"do\"];integrations.factory=function(method){return function(){var args=Array.prototype.slice.call(arguments);args.unshift(method);integrations.push(args);return integrations}};for(var i=0;i<integrations.methods.length;i++){var key=integrations.methods[i];integrations[key]=integrations.factory(key)}integrations.load=function(siteId){integrations.siteId=siteId;var script=document.createElement(\"script\");script.type=\"text/javascript\";script.async=true;script.src=\"https://cdn.integrationsjs.com/dist/boot.js\";var first=document.getElementsByTagName(\"script\")[0];first.parentNode.insertBefore(script,first)};\n\n // Load Integrations.js with your API key\n integrations.load('API_KEY_HERE');\n\n // Identify the user by their unique ID\n integrations.identify({\n userId: 'UNIQUE ID FOR USER' // email/username/userid\n });\n\n // Call setContext whenever the context of the page changes\n // This can be called any number of times\n integrations.setContext({\n people: [{\n email: 'jason@blockspring.com',\n name: 'Jason Tokoph'\n }],\n title: 'So many integrations, so little time',\n description: 'Take a look at integrationsjs.com',\n datasets: {\n foo: [['name', 'age'], ['jason', 29]]\n }\n });\n })();\n</script>", "language": "html" } ] } [/block] If you enabled Clearbit, and pasted this code snippet into your site with the proper API token in your account, then you've completed your first integration. You should see Clearbit enabled on your site. [block:image] { "images": [ { "image": [ "https://files.readme.io/692d4a8-Screen_Shot_2017-11-05_at_11.07.52_PM.png", "Screen Shot 2017-11-05 at 11.07.52 PM.png", 730, 1076, "#7d947d" ], "border": true } ] } [/block] [block:api-header] { "title": "Context" } [/block] You can power integrations by passing data into the `integrations.setContext` method. ## Export integrations Export integrations let users export data from your site into apps like Google Sheets. The typical usecase is for reporting. These integrations require you to pass a `datasets` context. You can pass multiple tables to export into the `datasets` context. Each table must be an array of arrays, and a named key. The below example shows an export integration with a single 'invoices' dataset: [block:code] { "codes": [ { "code": " integrations.setContext({\n datasets: {\n invoices: [\n ['name', 'bill'],\n ['jason', 29],\n ['christy', 12]\n ]\n }\n });", "language": "javascript" } ] } [/block] ## Workflow integrations Workflow integrations let users complete workflows without leaving your site - like creating a Trello card using data from your page. These integrations require you to pass a `title` and `description` context. For instance, if you're using the Trello integration it'll prefill the 'create a card' page with the title and description you provide. The below example shows a workflow integration context: [block:code] { "codes": [ { "code": " integrations.setContext({\n title: 'So many integrations, so little time',\n description: 'Take a look at integrationsjs.com',\n });", "language": "javascript" } ] } [/block] ## View integrations View integrations let users access to their own data (or 3rd party) from your site - like seeing a user's profile from a CRM or internal system. These integrations require you to pass a `people` context. You can pass multiple people, as long as each is an object with an 'email' key. The below example shows a view integration context: [block:code] { "codes": [ { "code": " integrations.setContext({\n people: [{\n email: 'jason@blockspring.com'\n }, {\n email: 'willis@example.com'\n }],\n });", "language": "javascript" } ] } [/block]