Embed WhatsApp Conversations Inside Your Product (COPY)

Get a ready-to-use iframe URL that opens a specific WhatsApp conversation for a given contact's phone number directly inside your application.

DoubleTick allows you to embed a live WhatsApp conversation directly inside your application using a secure iframe URL.

This is useful when you want your users, agents, or support teams to view and manage WhatsApp chats without leaving your platform.

Common use cases include:

  • CRM platforms showing customer conversations beside lead details
  • Support dashboards with embedded WhatsApp chats
  • Internal tools for sales or operations teams
  • Custom admin panels with integrated messaging
  • SaaS products offering WhatsApp communication inside their UI

The embedded interface is fully hosted and managed by DoubleTick, allowing users to interact with WhatsApp conversations directly from your platform.

Create WhatsApp Conversation Embed URL

Use the following endpoint to get an embed URL for a WhatsApp conversation:

POST https://public.doubletick.io/embed/url

Request Headers

{
  "Authorization": "YOUR_API_KEY",
  "Content-Type": "application/json"
}

๐Ÿ“˜

NOTE

If you do not have your DoubleTick API Key, you can obtain it by following this guide:
https://docs.doubletick.io/docs/quickstart-guide#step-2-generate-your-api-key

Request Body Parameters

{
  "phone": "919876543210",
  "integrationId": "intg_xxxxxxxxxx",
  "wabaNumber": "919000000000"
}

Parameters

  • phone (string, required):
    • WhatsApp phone number of the contact in international format.
    • No + or spaces.
  • integrationId (string, optional):
    • DoubleTick integration ID (e.g., intg_xxxxxxxxxx).
    • If not provided, the primary connected WhatsApp integration is used automatically.
  • wabaNumber (string, optional):
    • WhatsApp Business Account number in international format.
    • Ignored if integrationId is also provided.

๐Ÿ“˜

NOTE

This API generates a secure embeddable URL for a WhatsApp conversation.

The generated URL can be used inside an iframe to display:

  • A specific customer conversation
  • The DoubleTick messaging interface

The embed automatically opens the conversation associated with the provided phone number.


Responses

Success Response (200)

{
  "url": "https://webextend.doubletick.io/embed/conversations/intg_xxxxxxxxxx/customer_xxxxxxxxxx?showChatListPanel=false&showCustomerDetails=false&showSidebar=false"
}

Bad Request (400)

{
  "message": "error_message",
  "error": "Bad Request",
  "statusCode": 400
}

Unauthorized (401)

{
  "message": "Invalid public api key",
  "error": "Unauthorized",
  "statusCode": 401
}

Not Found (404)

{
  "message": "No connected WhatsApp integration found",
  "error": "Not Found",
  "statusCode": 404
}

Using the URL

Once you receive the url in the response, use it directly as the src of an iframe in your application:

<iframe
  src="https://webextend.doubletick.io/embed/conversations/intg_xxxxxxxxxx/customer_xxxxxxxxxx?showChatListPanel=false&showCustomerDetails=false&showSidebar=false"
  width="400"
  height="600"
  frameborder="0"
/>

Customizing the Embed URL

The embed URL supports a set of query parameters that let you control which panels and UI elements are visible. Append them directly to the URL returned by the API.

1. Layout & Navigation

Controls the major structural panels of the embed.

ParameterDefaultHow to changeDescription
showSidebarVisible=false to hideThe left-side navigation sidebar options
showChatListPanelVisible=false to hideThe chat list panel. When hidden, the embed opens directly into the active chat view without the list.
showChatFiltersVisible=false to hideThe filters panel on the left of the chat list.
set `showSidebar:false` to remove options from highlighted area

set showSidebar:false to remove options from highlighted area


set `showChatListPanel:false` to remove highlighted area

set showChatListPanel:false to remove highlighted area


set `showChatFilters:false` to remove highlighted area

set showChatFilters:false to remove highlighted area


2. Chat Header Actions

Controls the action buttons that appear in the header bar of an open conversation.

ParameterDefaultHow to changeDescription
showChatAssigneeVisible=false to hideThe agent assignee dropdown in the chat header
showChatMarkDoneVisible=false to hideThe โ€œMark as Doneโ€ button. Does not appear for group chats regardless of this setting.
showChatMenuVisible=false to hideThe three-dot (โ‹ฎ) action menu. Applies to individual chats only.
showChatCartVisible=false to hideThe cart / order button in the chat header.
showAddToBroadcastChannelVisible=false to hideThe โ€œAdd to Broadcast Channelโ€ option in the chat action menu.

set `showChatAssignee:false` to remove highlighted area

set showChatAssignee:false to remove highlighted area


set `showChatMarkDone:false` to remove highlighted area

set showChatMarkDone:false to remove highlighted area


set `showChatMenu:false` to remove highlighted area

set showChatMenu:false to remove highlighted area


set `showChatCart:false` to remove highlighted area

set showChatCart:false to remove highlighted area


set `showAddToBroadcastChannel:false` to remove highlighted area

set showAddToBroadcastChannel:false to remove highlighted area


3. Chat List

Controls elements within the chat list panel.

ParameterDefaultHow to changeDescription
showChatSearchVisible=false to hideThe search bar above the chat list.
showChatSelectionVisible=false to hideMulti-chat selection (checkboxes on each row). When hidden, users cannot select multiple chats for bulk actions.
showBulkMarkAsDoneVisible=false to hideThe "Mark as Done" button shown in the bulk-selection toolbar when multiple chats are selected.
set `showChatSearch:false` to remove highlighted area

set showChatSearch:false to remove highlighted area


set `showChatSelection:false` to remove highlighted area

set showChatSelection:false to remove highlighted area


set `showBulkMarkAsDone:false` to remove highlighted area

set showBulkMarkAsDone:false to remove highlighted area


4. Customer Details Panel

Controls sections within the right-side customer details panel.

ParameterDefaultHow to changeDescription
showCustomerDetailsVisible=false to hideThe entire customer details panel on the right side.
showNotesVisible=false to hideThe Notes section inside the customer details panel. When hidden, the custom fields section expands to full width.
showCallHistoryVisible=false to hideThe Call History section. Only relevant if the calling feature is enabled on your account.
showParticipantsVisible=false to hideThe details/participants panel in broadcast channel views.
showAddCustomFieldVisible=false to hideThe โ€œAdd Custom Fieldโ€ button in the custom fields section. Hides the button but existing custom fields remain visible.
set `showCustomerDetails:false` to remove highlighted area

set showCustomerDetails:false to remove highlighted area


set `showNotes: false` to remove highlighted area

set showNotes: false to remove highlighted area


set `showCallHistory: false` to remove highlighted area

set showCallHistory: false to remove highlighted area


set `showParticipants: false` to remove highlighted area

set showParticipants: false to remove highlighted area


set `showAddCustomField: false` to remove highlighted area

set showAddCustomField: false to remove highlighted area


5. Account/Session

ParameterDefaultHow to changeDescription
showLogoutInMenuHeaderHidden=true to showAdds a Logout button to the menu header. Enable this when your integration requires the end-user to be able to explicitly sign out from within the embed.
set `showLogoutInMenuHeader: false`  to remove highlighted area

set showLogoutInMenuHeader: false to remove highlighted area


6. Utility Parameters

These parameters are not visibility toggles โ€” they control embed behaviour directly.

ParameterValueDescription
clearLocalStoragetrueClears the cached embed visibility settings from the browser's localStorage. Append this once when you change your parameter configuration, and then remove it from subsequent loads.

Default Behaviour Summary

ParameterParameters
Visible by default
pass =false to hide
showCustomerDetails, showChatAssignee, showChatListPanel, showChatMarkDone, showChatTagList, showChatAddTag, showChatCart, showChatMenu, showAddToBroadcastChannel, showChatFilters, showChatSearch, showChatSelection, showAddCustomField, showNotes, showParticipants,showSidebar, showCallHistory, showBulkMarkAsDone
Hidden by default
pass =true to enable
showLogoutInMenuHeader

๐Ÿ“˜

Flushing the Cache

If you update your URL parameters and the changes don't take effect, append clearLocalStorage=true to the URL once to reset the cached configuration, then remove it from subsequent loads.

See Utility Parameters for details.


Best Practices

  • Always pass the phone number with the country code and no special characters (e.g., 919876543210 not +91 98765 43210).
  • Use integrationId or wabaNumber when you want to open the conversation with particular WhatsApp business number.
  • Leave showChatListPanel, showCustomerDetails, and showSidebar as false (default) for a focused single-conversation embed with no distractions.
  • Set all three to true if you want to give users access to the full DoubleTick interface inside the embed.
  • Append clearLocalStorage=true once after changing parameters โ€” embed settings are cached in the browser. Add this param to flush the cache, then remove it from subsequent loads to avoid repeated clears.
  • showChatMarkDone never appears on group chats โ€” this is expected behaviour regardless of the parameter value. Plan your UI accordingly if you support both individual and group chat contexts.
  • showCallHistory is only relevant if calling is enabled โ€” if the section doesn't appear, confirm with your DoubleTick account manager whether the calling feature is active on your account.
  • Use showLogoutInMenuHeader=true only when needed โ€” enable this only if your integration requires users to explicitly sign out from within the embed; it's hidden by default for a reason.

Did this page help you?