> ## Documentation Index
> Fetch the complete documentation index at: https://www.voiceflow.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect Voiceflow to Crisp

> Build and test a two-way live agent handoff connection with Crisp. Customers stay in Voiceflow while your team replies from your support platform.

## What you will build

Customers stay in their Voiceflow conversation while your team replies from Crisp. Your service translates the platform’s conversation operations and events into the [live agent handoff system](/docs/documentation/handoff/overview).

This is a developer implementation guide, not a native connector. The API approach has been reviewed against provider documentation; a live account test is required before rollout.

## Before you begin

You need Crisp API credentials, website ID, and permissions for conversation messages and event delivery, an HTTPS service, and access to Custom Handoff in Voiceflow. Start with [the shared connection starter](/docs/developers/handoff/connect). Choose one test customer and one support destination.

Treat the Crisp website ID as part of the conversation mapping. Keep API credentials on the service and implement attachment support separately from the text pilot.

## Implement the connection

<Steps>
<Step title="Prepare the support workspace">
Configure the API authentication tier required by your Crisp credentials and register message/state webhooks for the test website.

Confirm a teammate can receive and answer a manually created test conversation before adding Voiceflow.
</Step>
<Step title="Implement conversation creation">
POST `/v1/website/{website_id}/conversation` and save its session ID alongside the connection conversation ID.

Example provider request body for `POST /v1/website/WEBSITE_ID/conversation/SESSION_ID/message` (replace illustrative IDs):

```json
{
  "type": "text",
  "from": "user",
  "origin": "chat",
  "content": "I need help with my order."
}
```

Use the starter’s `create(request, connectionId)` hook. Persist the provider ID and connection ID together. Forward relevant context as an initial summary or supported private note; never inject internal metadata into customer-visible replies.
</Step>
<Step title="Forward customer messages">
POST `/v1/website/{website_id}/conversation/{session_id}/message` with a text message whose `from` is `user`.

Implement the starter’s `message(providerConversationId, message)` hook. Deduplicate the Voiceflow message `id`. For the first test, support text and explicitly reject unsupported files rather than acknowledging and dropping them.
</Step>
<Step title="Receive human replies">
Subscribe to conversation message and state events. Relay operator messages, not user messages or notes. Validate the webhook according to the selected Crisp hook type.

After provider authentication succeeds, look up the mapped connection ID and send a normalized `message.received` event to the starter’s authenticated `/events` route. Include a stable provider event ID, timestamp and human display name. Do not manufacture an `agent.joined` event merely because a conversation was created.
</Step>
<Step title="Implement closure">
Use the conversation state API to mark the session resolved. Translate the resolved state into `conversation.ended` once.

Implement the `end(providerConversationId)` hook. Deliver `conversation.ended` for provider-initiated closure. Make both paths idempotent so a reflected closure cannot trigger an endless loop.
</Step>
<Step title="Connect and test in Voiceflow">
Configure your service in **Settings → Integrations → Custom Handoff**, then follow [Set up live agent handoff](/docs/documentation/handoff/setup). Set Queue ID only when your service has a documented mapping. Publish to a test environment and use the actual customer channel.
</Step>
</Steps>

### Provider mapping

Use the `session_id` returned by conversation creation as the provider ID. Store the website ID alongside it. For outbound text, the body shown above posts as `user`; for incoming human replies, accept operator messages only. Implement state changes using the conversation state endpoint and avoid forwarding your own user messages back as operator messages.

## Verify a complete handoff

Run this acceptance sequence with a teammate in Crisp:

1. Escalate and confirm exactly one conversation appears in the intended inbox.
2. Check the customer identity and escalation context.
3. Send “customer test 1” from Voiceflow and “human test 1” from the support inbox. Both must arrive once.
4. Add a private note; it must not reach the customer.
5. Replay the same customer-message ID and provider event ID; neither should duplicate a message.
6. Close from the support inbox and verify the configured return-to-AI path.
7. Repeat with invalid credentials and an unavailable provider; verify the fallback.

If messages disappear, inspect the provider delivery log, the ID mapping and Voiceflow callback response in that order. A successful create call alone does not establish that the connection works.

## Reference and next steps

[Provider setup/API documentation](https://docs.crisp.chat/references/rest-api/v1/) · [Provider messages/events documentation](https://docs.crisp.chat/references/web-hooks/v1/)

[Connection API](/docs/developers/handoff/connection-api) · [Event contract](/docs/developers/handoff/webhook-events) · [Troubleshooting](/docs/documentation/handoff/troubleshooting)

Before production, replace in-memory state with durable storage, implement the provider’s retry/refresh rules, and test attachment and routing support only if your deployment needs them.