Quickstart

Follow these easy steps to start using InboxComponents

Step 1: Create an account

Go to app.inboxcomponents.com and sign up for an account. Once you're logged in, you’ll have access to your dashboard where you can manage API keys, components, and clients.

Step 2: Create an API Key

In your dashboard, navigate to the API Keys section and click Generate token. Store this key securely—you’ll need it to authenticate API requests.

Step 3: Create a component

Go to the Components section and click Create component. This will generate a componentId that uniquely identifies your inbox widget.

Step 4: Create a client

Next, go to the Clients section in the dashboard and click Create client. This links a specific user or tenant to your component.

Step 5: Request a token

With your API Key, componentId, and clientId in hand, request a secure token using the API. Tokens are currently valid for 8 hours.

curl -X POST https://app.inboxcomponents.com/authentication/login_check \
     -H "Content-Type: application/json" \
     -H "X-API-KEY: YOUR_API_KEY" \
     -d '{
       "componentId": "YOUR_COMPONENT_ID",
       "clientId": "YOUR_CLIENT_ID"
     }'

use GuzzleHttp\Client;

$client = new Client();
$response = $client->post('https://app.inboxcomponents.com/authentication/login_check', [
    'headers' => [
        'Content-Type' => 'application/json',
        'X-API-KEY' => 'YOUR_API_KEY',
    ],
    'json' => [
        'componentId' => 'YOUR_COMPONENT_ID',
        'clientId' => 'YOUR_CLIENT_ID',
    ],
]);

$body = json_decode($response->getBody(), true);
echo 'Token: ' . $body['token'];

const axios = require('axios');

async function getToken() {
  try {
    const response = await axios.post('https://app.inboxcomponents.com/authentication/login_check', {
      componentId: 'YOUR_COMPONENT_ID',
      clientId: 'YOUR_CLIENT_ID',
    }, {
      headers: {
        'Content-Type': 'application/json',
        'X-API-KEY': 'YOUR_API_KEY',
      },
    });

    console.log('Token:', response.data.token);
  } catch (error) {
    console.error('Error fetching token:', error.response?.data || error.message);
  }
}

getToken();

import requests

url = "https://app.inboxcomponents.com/authentication/login_check"
headers = {
    "Content-Type": "application/json",
    "X-API-KEY": "YOUR_API_KEY"
}
payload = {
    "componentId": "YOUR_COMPONENT_ID",
    "clientId": "YOUR_CLIENT_ID"
}

response = requests.post(url, json=payload, headers=headers)
data = response.json()

print("Token:", data["token"])

Response:

{
  "token": "eyJhbGciOiJI..."
}

Save the token—you’ll need it in the next step. Make sure you keep the token safe.

Step 6: Embed the component

Add the following HTML snippet to your page and replace [[ TOKEN ]] with your actual token. The token will be refreshed by the component.

<inbox-components-conversation token="[[ TOKEN ]]">
    Loading...
</inbox-components-conversation>

<script 
    type="module" 
    src="https://unpkg.com/@inbox-components/conversation@latest/index.js"
></script>

We always recommend installing our component via NPM when used in production environments.

🎉 All set!

Your InboxComponents widget is now live! If you have questions or run into issues, check out the rest of the docs, contact support, or join our Slack community.

PreviousWelcome NextComponent

Last updated 4 months ago

Was this helpful?