The easiest way to use Xkit is with the Hosted Integration Catalog. In this setup, you log users into Xkit on your website, and use links to the Xkit integration catalog to have them set up integrations.

The integration catalog has some limited branding. For more control over the look of the Integration Catalog, check out the options in Rendering the Integration Catalog and Integrating with React.

Get an Xkit User Token

On the front-end of your application (e.g. in HTML or client-side Javascript) you'll need access to an Xkit User Token. You can use any of the methods outlined in Xkit User Tokens to get a token.

Log the user into Xkit

On the front-end of your application, include a script tag for xkit.js served from your Xkit subdomain.

<script src="https://<your-slug>.xkit.co/xkit.js"></script>

With the Xkit User Token, call the login method of xkit.js to log the user into Xkit.

// const sample_xkit_user_token = "some_token_retrieved_via_html_or_api"

xkit.ready(() => {
  xkit.login(sample_xkit_user_token)
})

Note: you only need to call xkit.ready if you're calling xkit outside the scope of a typical domReady environment.

Link to the Xkit Catalog

Wherever you need to provide access to your integration catalog, use a link to your Xkit subdomain.

<a href="https://<your-slug>.xkit.co">Integration Catalog</a>

For convenience, xkit.js includes this URL as a property: xkit.url.

<a onClick="window.location.href = xkit.url;">Integration Catalog</a>

xkit.js also includes a helper to get the link to a specific connector's page: xkit.connectorUrl(<slug>).

<a onClick="window.location.href = xkit.connectorUrl('slack');">Connect to Slack</a>