<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Mary</title>
    <description>The latest articles on DEV Community by Mary (@maryinging).</description>
    <link>https://dev.to/maryinging</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4012376%2F049f0d96-8ba0-4cb6-be69-ac6032e47d3e.png</url>
      <title>DEV Community: Mary</title>
      <link>https://dev.to/maryinging</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/maryinging"/>
    <language>en</language>
    <item>
      <title>Knocket: Connect with customers online with just one click.</title>
      <dc:creator>Mary</dc:creator>
      <pubDate>Thu, 02 Jul 2026 13:52:22 +0000</pubDate>
      <link>https://dev.to/maryinging/knocke-connect-with-customers-online-with-just-one-click-1bhb</link>
      <guid>https://dev.to/maryinging/knocke-connect-with-customers-online-with-just-one-click-1bhb</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1y5wrwfe4n2q6qm9qrts.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1y5wrwfe4n2q6qm9qrts.png" alt=" " width="800" height="301"&gt;&lt;/a&gt;Most chat widgets ship with their own dashboard. And another dashboard for email. And a third for the messaging app your users actually use. If you're an indie maker with 30 signups, opening three dashboards to reply to five messages is a joke.&lt;/p&gt;

&lt;p&gt;We built &lt;a href="https://trtc.io/solutions/knocket" rel="noopener noreferrer"&gt;&lt;strong&gt;Knocket&lt;/strong&gt;&lt;/a&gt; as the free contact layer for indie developers who don't want to babysit dashboards. One line to install a live chat widget. One shareable contact page. One inbox that receives Live Chat, Telegram, and Email in the same place — and lets you reply directly from Telegram without opening anything else.&lt;/p&gt;

&lt;p&gt;This post walks through the design decisions behind the unified inbox — specifically how we route three channels through a single webhook without leaking channel-specific logic all over the codebase.&lt;/p&gt;

&lt;h2&gt;
  
  
  The problem with "one inbox for everything"
&lt;/h2&gt;

&lt;p&gt;You've seen the pitch before. Every helpdesk product from Intercom on down claims a "unified inbox." In practice they mean:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Live chat&lt;/strong&gt;: real-time bidirectional WebSocket&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Email&lt;/strong&gt;: SMTP inbound + polling&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Messaging apps&lt;/strong&gt;: platform-specific webhooks (Telegram Bot API, Meta Graph, etc.)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each channel has its own delivery guarantees, ordering, retry semantics, and failure modes. A naive implementation hardcodes three code paths and inevitably drifts — a bug fix in the email path doesn't apply to Telegram, and now you have three subtly different reply behaviors.&lt;/p&gt;

&lt;h2&gt;
  
  
  The design: normalize at the edge, unify in the middle
&lt;/h2&gt;

&lt;p&gt;We settled on a three-layer shape:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;┌────────────────────────────────────────────┐
│  Channel Adapters (one per source)         │
│  ─ Live Chat WebSocket                     │
│  ─ Telegram Bot webhook                    │
│  ─ IMAP/SMTP email                         │
└────────────────────────────────────────────┘
              ↓ normalized event
┌────────────────────────────────────────────┐
│  Unified Message Bus (single format)       │
│  { conversation_id, sender, body, ... }    │
└────────────────────────────────────────────┘
              ↓ fan-out
┌────────────────────────────────────────────┐
│  Inbox UI  ·  Notifications  ·  Reply Router│
└────────────────────────────────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The core rule: &lt;strong&gt;anything that knows about "Telegram" or "SMTP" lives only in an adapter&lt;/strong&gt;. The bus and the UI see one message shape. Adding a new channel (WhatsApp is next) is a new adapter, not a new special case in the reply logic.&lt;/p&gt;

&lt;h2&gt;
  
  
  The reply router — the interesting part
&lt;/h2&gt;

&lt;p&gt;The subtle problem: when you reply from Telegram, the reply must go back to the visitor via &lt;strong&gt;the original channel&lt;/strong&gt;. If Sarah pinged you via the website widget and you type a reply into your Telegram app, that reply has to appear in Sarah's browser — not as a Telegram message to Sarah.&lt;/p&gt;

&lt;p&gt;Every message on the bus carries &lt;code&gt;source_channel&lt;/code&gt;. The reply router reads that field and dispatches to the right outbound adapter:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Simplified&lt;/span&gt;
&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;routeReply&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;originalMessage&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;replyBody&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;adapter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;adapters&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;originalMessage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;source_channel&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
  &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;adapter&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;sendReply&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;conversation_id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;originalMessage&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;conversation_id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;body&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;replyBody&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The Telegram adapter is where the neat trick lives: when Knocket forwards a live-chat message to your Telegram, the message includes structured metadata so a &lt;strong&gt;quote-reply&lt;/strong&gt; in Telegram carries enough context for the router to reconstruct the original conversation. You reply in Telegram like you're replying to a friend, and it lands in the visitor's browser.&lt;/p&gt;

&lt;p&gt;No new dashboard. No context switch. No "let me open the console real quick."&lt;/p&gt;

&lt;h2&gt;
  
  
  What this made easy
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;New channels are additive.&lt;/strong&gt; Adding a channel is one adapter file plus registration.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The inbox UI is boring.&lt;/strong&gt; It renders one message shape. It doesn't care about the source.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Notifications are trivial.&lt;/strong&gt; One "new message" event, delivered to browser push and Telegram.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Failure modes are localized.&lt;/strong&gt; If Telegram's API is down, only the Telegram adapter fails. Live chat and email keep flowing.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What we open-sourced
&lt;/h2&gt;

&lt;p&gt;We also released a companion project — an &lt;strong&gt;open-source AI auto-reply agent&lt;/strong&gt; that plugs into the same message bus. It's a reference implementation for anyone who wants to run their own AI reply layer against a Knocket inbox: &lt;a href="https://github.com/fangxinmoon/knocket-inbox-agent-EN" rel="noopener noreferrer"&gt;github.com/fangxinmoon/knocket-inbox-agent-EN&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you want to plug it into your own knowledge base, the agent's system prompt and retrieval layer are yours to swap out.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://trtc.io/solutions/knocket" rel="noopener noreferrer"&gt;Knocket&lt;/a&gt; is 100% free forever — no ads, no seat limits, no paid tier. If you're at the "first 100 users" stage and Intercom's pricing feels absurd, this is the tool we wish existed when we started.&lt;/p&gt;

&lt;p&gt;Set-up is one script tag. If you're on Framer, Webflow, WordPress, Ghost, Shopify, or anything else that supports custom code, you're 60 seconds from a live chat widget.&lt;/p&gt;

&lt;p&gt;Powered by Tencent RTC infrastructure for global low-latency delivery.&lt;/p&gt;

&lt;p&gt;Would love feedback in the comments — especially from anyone who's built or hated multi-channel inboxes before. What did we get wrong?&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>productivity</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
