Chatlane
Inbox & channels·Updated Apr 15, 2026 · 4 min read

Contact Cards

Let your visitors know how to reach you

A Contact Card is an embeddable “Contact Us” surface for your websites. It shows visitors every way to reach you — email, WhatsApp, phone, SMS, Messenger, Instagram, plus any custom rows you add — and offers a single channel as a prominent recommended action. Cards are team-level, so one card can live on multiple sites and channels added once on an inbox can appear on every card you build.

What a Contact Card does

  • Renders a floating launcher pill (or your own custom trigger) that opens a modal showing all your contact options.
  • Lists each channel as a tappable row that deep-links out to the right destination (mailto:, tel:, sms:, https://wa.me/, https://m.me/, https://instagram.com/).
  • Highlights one channel as Recommended with a full-width, channel-coloured CTA at the top of each section.
  • Hands off to the Website Chat Widget — tap “Website chat” and the card closes, the chat window opens.
  • Supports multiple sections mapped to different inboxes (e.g. Sales, Support, Billing) with a segmented switcher.
  • Lets you add external rows that aren’t inbox channels — address, opening hours, social handles, anything else with a label and value.

Quick start

  1. Open Contact Cards in the sidebar (under Platform).
  2. Click + New contact card, give it a name and header title.
  3. Open the Sections tab and add a section pointing at one of your inboxes.
  4. Toggle on the channels you want shown, fill in the public label and value (or accept the inferred default).
  5. Open the Embed tab, copy the snippet, paste it into your site’s <head> or just before </body>.

Tabs

The card editor uses a left-rail nav with six tabs and a sticky Live preview on the right that updates as you change fields. The active tab is reflected in the URL hash so you can deep-link or refresh without losing your place.

Overview

At-a-glance summary: card name, header, status toggle, sections, and allowed origins.

Card details

  • Card name — internal only; visitors don’t see it.
  • Header title / subtitle — shown in the dark band on top of the card.
  • Allowed origins — domains that may load this card. Anywhere else, the embed refuses to render. Leave empty to allow any origin (useful while testing).
  • Status — flip to pause the card without deleting it.

Sections

Each section maps to one inbox. Visitors with multiple sections see a segmented switcher (or a dropdown when there are 4+).

For each section you can:

  • Pick a recommended channel — shown as the prominent CTA at the top of the section.
  • Toggle channels on/off — every published channel on that inbox shows here. Toggling on auto-publishes the channel to contact cards if it wasn’t already.
  • Edit the public label and value — these live with the channel itself, so changes propagate to every other card that uses it. Leave blank to fall back to the channel’s own value (e.g. from_email for an email channel, the first phone number for Twilio).
  • Reorder — arrows on each row move it up or down.
  • Include website chat — adds a “Live chat” row that hands off to your existing chat widget. See Website Chat Widget for setup.
  • Add external items — anything that isn’t an inbox channel. Pick from preset icons (Location, Hours, Website, Calendar, Phone, Email, Info, Star, Link, Tag), set a label/value, and optionally a link to make it tappable.

Design

  • Header colour — dark band background and the launcher pill colour both come from this.
  • Trigger — Floating launcher (we render the pill) or Custom (you bind your own button).
  • Launcher position — bottom left or bottom right.
  • Launcher size — Small, Medium, or Large. Default is Medium.
  • Launcher icon — pick a preset (Chat, Speech, Wave, Support headset, Mail, Spark) or paste a URL to a hosted SVG/PNG (≥ 64×64).
  • Launcher label — the text shown in the pill (e.g. Contact Us, Get in touch).
  • Powered by chatlane.io — toggle the footer credit.

Embed

The snippet to drop on your site:

<!-- Chatlane Contact Card -->
<script src="https://your-chatlane-domain.com/contact-card.js?key=YOUR_EMBED_KEY" async></script>

Paste it just before </body> on every page that should show the card. The Embed tab has a Copy button for the exact snippet for this card.

If you’d rather use your own button — a custom CTA on a hero, a footer link, an in-app banner — set the trigger mode to Custom in the Design tab, then call window.chatlane.openContactCard() from your button:

<button onclick="window.chatlane.openContactCard()">Get in touch</button>

You can call window.chatlane.closeContactCard() to dismiss it programmatically.

Danger zone

  • Pause embed — stops the card from rendering anywhere without deleting it. Visitors see nothing in its place.
  • Reset embed token — invalidates the current snippet. You’ll need to redeploy the new one. Useful if a key has leaked.
  • Delete card — permanently removes the card. Conversations already collected stay in their inboxes; the embed stops rendering.

How channel publishing works

Channels are owned by inboxes, not by cards. The same WhatsApp number, email channel, or Twilio phone can appear on many cards.

The two layers of control:

  1. Channel-level (Show on contact cards) — a global gate per channel. When on, the channel is referenceable from any card. Toggle it off to immediately remove the channel from every card without touching any card config. The card editor flips this on automatically the first time you enable a channel in any section, so you usually don’t have to think about it.
  2. Per-section toggle — within each section of each card, you choose which of that inbox’s available channels actually appear. Toggling off in one section doesn’t affect the others.

A channel only renders publicly when:

  • It’s enabled in the section (is_enabled = true).
  • Its global Show on contact cards is on.
  • It has a public value to deep-link to (the editor falls back to the channel’s own settings if you don’t set one explicitly).

Hand-off to the Website Chat Widget

Toggling Include website chat on a section adds a Live chat row to that section. When a visitor taps it:

  1. The Contact Card scales + fades out (~250 ms).
  2. The card calls window.chatlane.openWidget(), which is exposed by the Website Chat Widget bundle.
  3. The chat window opens.

For this to work, both scripts must be loaded on the page:

<script src="https://your-chatlane-domain.com/widget.js?key=WIDGET_KEY&hidden=1"></script>
<script src="https://your-chatlane-domain.com/contact-card.js?key=CARD_KEY" async></script>

The ?hidden=1 flag on the widget script keeps the chat bubble hidden so the Contact Card pill is the only launcher on the page. See Website Chat Widget — hide the bubble for details.

If the widget isn’t loaded on the page, tapping Website chat dismisses the card and logs a console warning — it won’t throw.

Inbox channel type Public kind Tap behaviour
email email mailto:VALUE
sms (Twilio) sms sms:VALUE
whatsapp / whatsapp_cloud whatsapp https://wa.me/DIGITS
phone_call (Twilio) phone tel:VALUE
facebook messenger https://m.me/PAGE_ID
instagram instagram https://instagram.com/HANDLE
Website chat (section toggle) webchat hand-off to window.chatlane.openWidget()
External row with link (any) the URL you set, opens in a new tab
External row without link (any) not clickable; renders as static info

Conditional loading (Google Tag Manager and SPAs)

If you load contact-card.js conditionally — only on certain pages, or only for certain visitor segments — you’ll hit a quirk: GTM (and most tag managers) fire tags when their trigger matches, but they don’t unload anything. So if you set GTM to load the card only on /home, and a visitor navigates to /contact without a full page reload, the launcher stays on screen until the next hard refresh.

The bundle exposes a teardown helper for exactly this case:

window.chatlane.destroyContactCard();

It removes the launcher, the modal, and the injected styles. Calling ChatlaneContactCard.init({ key: 'YOUR_KEY' }) again later re-renders the card cleanly.

GTM pattern

Create two tags:

  1. Load — <script src=".../contact-card.js?key=YOUR_KEY"> with a trigger that matches your "show card" condition (e.g. Page Path equals /).
  2. Unload — a Custom HTML tag that runs:
    <script>
  if (window.chatlane && window.chatlane.destroyContactCard) {
    window.chatlane.destroyContactCard();
  }
</script>
    …with a trigger for the inverse condition (e.g. Page Path does not equal /).

For SPAs, fire both tags off your router's history-change event so they re-evaluate on virtual page views, not just real ones.

Mobile behaviour

On phones (≤ 540 px viewport) the card takes over the full screen rather than floating. The launcher pill stays anchored to the bottom corner.

Allowed origins

The card refuses to render if the page’s origin isn’t in the Allowed origins list. Add the bare host (e.g. acme.com, www.acme.com, help.acme.com) — protocol is optional and matched on host. Leave the list empty to allow any origin (useful for development).

Troubleshooting

The card doesn’t appear

  • Check the browser’s Network tab for contact-card.js — should be 200, not 404.
  • Open the JS console: missing-key and origin-not-allowed errors are logged with [chatlane:contact-card].
  • Confirm the embed key matches what’s in the Embed tab.
  • If you set Allowed origins, make sure the current host is in the list.

A channel I added isn’t showing

  • Open the inbox’s channel and confirm a public value is set (or that the channel’s own settings have a usable default like from_email for email or a phone number for Twilio).
  • Confirm Show on contact cards is on for that channel — usually the editor sets it for you, but if you toggled it off later it won’t render anywhere.
  • Confirm the per-section toggle is on for that channel in this card.

Website chat row does nothing when tapped

  • Make sure the Website Chat Widget script is loaded on the same page.
  • Confirm the widget key is valid (the widget will silently no-op if it can’t boot).
  • Check the JS console for [chatlane:contact-card] no chat widget loaded.

Custom launcher doesn’t open the card

  • Set the trigger mode to Custom in the Design tab; otherwise both the floating pill and your button render.
  • Call window.chatlane.openContactCard(), not openWidget().
  • Make sure the script tag has loaded before the click — async is fine but the function won’t exist until the bundle has executed.

Snippet works locally but not in production

  • The host changes between environments. Confirm Allowed origins on the card includes your production domain.
  • Some hosts strip <script> tags from CMS body content; paste the snippet into a layout/template file instead.

Best practices

  • Pick a recommended channel that reflects how you actually want to be reached. WhatsApp with a fast reply time gets dramatically more taps than email-as-recommended.
  • Keep external rows useful. Address, opening hours, helpline number — things visitors look for that aren’t live channels. Don’t crowd the card with every social handle you have.
  • Use sections for routing, not for branding. One section per inbox keeps conversations going to the right team. Customers visiting the EU site don’t need the global support inbox section.
  • Lock down origins for production cards so the snippet can’t be lifted onto another site.
  • Pair with hidden-bubble mode when the Contact Card is your primary surface so visitors see one launcher, not two.

Security and limits

  • Embed keys are public and tied to one card. Treat them like API keys you’re comfortable having in HTML.
  • Allowed origins are checked server-side against the Origin header — even with the embed key, requests from disallowed origins return 403.
  • No PII collection. The card itself doesn’t take any visitor input. Visitors only interact via deep-links (which leave Chatlane) or hand off to the chat widget (which has its own identification flow).
  • Rate limiting applies to the public config endpoint (120 requests / minute / IP).
  • One card, many sites. Each card has one snippet, but you can paste it on multiple domains as long as they’re in Allowed origins.
  • Channel-level kill switch. Toggling Show on contact cards off on a channel removes it from every card instantly without changing any card config.

Need more help?

  • For the chat widget half of the hand-off, see Website Chat Widget.
  • For setting up the underlying channels (email, SMS, WhatsApp, etc.), see Connect your channels.
  • Use Chatlane logs and the browser console/Network tab to debug embed issues.
Was this article helpful?
Your feedback helps us improve our docs.
Suggest an edit

Related articles

Get started with Chatlane
Set up your inbox and receive your first message
6 min
Give your AI agent a knowledge base
Upload files and use message attachments
6 min
Let your AI agent take action
Update status, tags, contacts, and external systems
7 min
Website Chat Widget
Add chat to your site
6 min