Inbox & channels·Updated Apr 2, 2026 · 4 min read

Contact integration demo example

A worked example you can copy from

This example demonstrates how to set up and use Contact Integrations in Chatlane.

Scenario: Customer Data Integration

Goal: Automatically fetch customer subscription and support tier information from an external API when viewing a contact profile.

Step 1: Configure Integration (Admin)

Go to Team Integrations (from sidebar navigation)
Click "Add Integration"

Configuration Tab - Fill out the form:

Name: Customer Data Lookup
Description: Fetch subscription and support tier from CRM
HTTP Method: GET
API Endpoint: https://api.yourcompany.com/customers/{{contact.email}}
Cache Duration: 15 minutes

Add Headers (if needed):

Authorization: Bearer your-api-token-here
Content-Type: application/json

Testing Tab - Test the Integration:
- Enter a test Contact ID (e.g., 123)
- Click "Run Test"
- View live API response and performance metrics
- Verify the API returns expected data
Template Tab - Create Display Template:
- Use visual editor to create custom layout
- Add sections for customer info, financial data, etc.
- Preview with sample data
- Save template configuration
Attach to Inboxes:
- Select which inboxes should use this integration
- Can attach to multiple inboxes as needed
Save & Activate

Step 2: External API Response

When the integration calls https://api.yourcompany.com/customers/[email protected], your API should return JSON like:

{
  "customer_id": 12345,
  "email": "[email protected]",
  "subscription": {
    "plan": "Premium",
    "status": "active",
    "renewal_date": "2024-06-15"
  },
  "support_tier": "Priority",
  "last_purchase": "2024-01-15T10:30:00Z",
  "lifetime_value": 2850.00,
  "tags": ["vip", "beta-user"]
}

Step 3: View in ContactProfileSheet

When a support agent opens a contact profile:

Auto-execution: The integration runs automatically for all attached inboxes
Rich Display: External Data section shows formatted, actionable information:

┌─ External Data ──────────────────────── [Refresh All] ┐
│                                                        │
│ Customer Data Lookup                              [⟲] │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Customer Information                               │ │
│ │                                                    │ │
│ │ Customer ID        12345                           │ │
│ │ Support Tier       [Priority]                      │ │
│ │ Plan              [Premium]                        │ │
│ │ Status            [Active]                         │ │
│ │                                                    │ │
│ │ ────────────────────────────────────               │ │
│ │                                                    │ │
│ │ Financial Summary                                  │ │
│ │ Lifetime Value    $2,850.00                       │ │
│ │ Last Purchase     Jan 15, 2024                    │ │
│ │                                                    │ │
│ │ Quick Actions                                      │ │
│ │ [View Profile] [Billing Portal]                   │ │
│ └────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘

Key Improvements:

Clean UI: No technical metadata clutter (success badges, cache indicators, response times)
Custom Templates: Structured, formatted display instead of raw JSON
Interactive Elements: Clickable buttons and links that open in new tabs
Rich Formatting: Currency, dates, badges, and status indicators
Actionable Data: Direct links to external systems for quick access

Step 4: Agent Benefits

Immediate Context: Agent sees:

Customer is on Premium plan
Priority support tier
High lifetime value ($2,850)
Account is active and healthy

Actionable Intelligence:

Prioritize this customer's request
Offer premium-level support
Consider upselling opportunities
Reference their beta-user status

Technical Flow

1. ContactProfileSheet Opens

// Auto-triggered when contact sheet opens
executeContactIntegrations()

2. Integration Execution

// Calls: GET https://api.yourcompany.com/customers/[email protected]
// Headers: Authorization: Bearer your-token
// Variables resolved: {{contact.email}} → [email protected]

3. Response Processing

// HttpRequestService handles the HTTP call
// ContactIntegrationService manages caching
// Result stored in integrationData[integrationId]

4. UI Display

<!-- External Data section renders automatically -->
<Card v-if="hasIntegrationData">
  <CardContent>
    <!-- JSON data formatted and displayed -->
    <pre>{{ formatIntegrationData(result.data) }}</pre>
  </CardContent>
</Card>

Advanced Usage

Multiple Integrations

Set up multiple team-level integrations for comprehensive contact data:

CRM Data: Customer subscription and tier information
Order History: Multiple orders displayed in repeating sections with links to order details
Support History: Previous tickets and resolution times with status indicators
Product Usage: Feature adoption and usage metrics
Billing Info: Payment status and outstanding invoices with payment portal links

Benefits:

Team-Wide Sharing: Create once, attach to multiple inboxes as needed
Rich Display: Each integration shows formatted data with custom templates
Array Support: Order history, ticket lists, and transaction arrays display beautifully
Interactive Elements: Links and buttons provide direct access to external systems
Clean Interface: Focus on actionable data without technical clutter

Each integration runs automatically and displays in separate, cleanly formatted cards.

Variable Replacement

Use dynamic variables in your API URLs:

GET https://api.billing.com/invoices?customer={{contact.email}}&limit=5
GET https://api.support.com/tickets/{{contact.id}}/recent
GET https://api.orders.com/customer/{{contact.id}}/orders
POST https://api.crm.com/enrich
Body: {"email": "{{contact.email}}", "conversation_id": {{conversation.id}}}

Example: Order History Integration with Arrays

API Response:

{
  "orders": [
    {
      "id": 12345,
      "status": "completed",
      "amount": "$450.00",
      "order_url": "https://orders.example.com/12345"
    },
    {
      "id": 12346,
      "status": "in_progress", 
      "amount": "$750.00",
      "order_url": "https://orders.example.com/12346"
    }
  ]
}

Template Configuration:

Section Type: Repeating Section
Array Path: orders
Item Fields:
- Order ID: {{id}} (text)
- Status: {{status}} (status badge)
- Amount: {{amount}} (currency)
- View Order: {{order_url}} (link)

Result: Each order displays as a separate card with clickable links to view order details.

Error Handling

If an integration fails:

┌─ External Data ──────────────────────── [Refresh All] ┐
│                                                        │
│ Customer Data Lookup            Failed      250ms  [⟲] │
│ ┌────────────────────────────────────────────────────┐ │
│ │ ⚠️ API returned 404: Customer not found            │ │
│ │                                                    │ │
│ │ This contact may not exist in the CRM system.     │ │
│ └────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘