@layouts.dash.app({
  title: 'WEBHOOK'
})

  <div class="lazy-container-sm">
    <section class="flex flex-row flex-wrap justify-between mb-5 gap-5">
      <div>
        <div class="text-2xl font-bold">
          Webhook
        </div>
        <div class="text-sm text-cat-600 dark:text-cat-400 max-w-xl">
          A webhook is a mechanism that allows one application (source) to automatically send data to another application (recipient) immediately after a message upsert event.
        </div>
      </div>
    </section>

    <section class="flex flex-col gap-10">
      <div>
        <div class="font-semibold mb-3"># n8n</div>
        <iframe class="aspect-[16/9] rounded-lg" src="https://www.youtube.com/embed/pgao0UExTs4?si=lfMlwQZmUx0dRkQ0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      </div>
      <div>
        <div class="font-semibold mb-3"># Example Webhook NodeJS</div>
        <div class="text-sm mb-3">Endpoint: <span class="underline select-all">http://localhost:3335/webhook</span></div>
        <pre class="text-[0.9rem] p-0"><code class="language-js">const express = require(&quot;express&quot;);
const app = express();
app.use(express.json({ limit: &#39;50mb&#39; }));
app.use(express.urlencoded({ limit: &#39;50mb&#39;, extended: true }));

const port = 3335;

async function sendMessage(data) {
  const url = &quot;{{ `${request.protocol()}://${request.host()}/api/message` }}&quot;;

  const response = await fetch(url, {
    method: &quot;POST&quot;,
    headers: {
      &quot;Content-Type&quot;: &quot;application/json&quot;,
    },
    body: JSON.stringify(data),
  });
  console.log(await response.json());
}

app.post(&quot;/webhook&quot;, function (req, res) {
  const body = req.body;
  if (body.msg.text == &quot;ping&quot;) {
    sendMessage({
        token: body.token,
        to: body.chat,
        message: &quot;pong&quot;,
    });
  }
  res.end();
});

app.listen(port, function (err) {
  if (err) console.log(err);
  console.log(&quot;Server listening on PORT&quot;, port);
});
</code></pre>
      </div>

      <div>
        <div class="font-semibold mb-5"># Example data from Webhook</div>
        <pre class="text-[0.9rem] p-0"><code class="language-js">{
  key: {
    remoteJid: &#39;120363351184073195@g.us&#39;,
    fromMe: false,
    id: &#39;3FFBF7252669239DC49E&#39;,
    senderLid: undefined,
    senderPn: undefined,
    participant: &#39;210900309037136@lid&#39;,
    participantPn: &#39;6285174902345@s.whatsapp.net&#39;,
    participantLid: undefined
  },
  chat: &#39;120363351184073195@g.us&#39;,
  fromMe: false,
  pushName: &#39;Ilsya&#39;,
  senderLid: &#39;210900309037136@lid&#39;,
  senderPn: &#39;6285174902345@s.whatsapp.net&#39;,
  botLid: &#39;10123909054630@lid&#39;,
  botPn: &#39;6281513922227@s.whatsapp.net&#39;,
  token: 'TOKEN_FOR_API',
  isGroup: true,
  isSenderBot: false,
  isSenderSuperAdmin: false,
  isSenderAdmin: true,
  isBotSuperAdmin: false,
  isBotAdmin: true,
  groupMetadata: {
    id: &#39;120363351184073195@g.us&#39;,
    addressingMode: &#39;lid&#39;,
    subject: &#39;Developer Test&#39;,
    subjectOwner: &#39;210900309037136@lid&#39;,
    subjectOwnerJid: &#39;6285174902345@s.whatsapp.net&#39;,
    subjectTime: 1759655643,
    size: 4,
    creation: 1729959196,
    owner: &#39;210900309037136@lid&#39;,
    ownerJid: &#39;6285174902345@s.whatsapp.net&#39;,
    owner_country_code: &#39;ID&#39;,
    desc: &#39;&#39;,
    descId: &#39;da1852ce-aad5-4bf1-b800-ff391093b13f&#39;,
    descOwner: &#39;210900309037136@lid&#39;,
    descOwnerJid: &#39;6285174902345@s.whatsapp.net&#39;,
    descTime: 1759056746,
    linkedParent: undefined,
    restrict: false,
    announce: false,
    isCommunity: false,
    isCommunityAnnounce: false,
    joinApprovalMode: false,
    memberAddMode: false,
    participants: [ [Object], [Object], [Object], [Object] ],
    ephemeralDuration: 86400
  },
  mtype: &#39;extendedTextMessage&#39;,
  msg: {
    text: &#39;test&#39;,
    textWithoutCommand: &#39;&#39;,
    command: &#39;test&#39;,
    mentionedJid: [],
    expiration: 86400,
    isText: true,
    isSticker: false,
    isImage: false,
    isVideo: false,
    isAudio: false,
    isDocument: false,
    isMedia: false
  },
  quoted: [QuotedMessage],
}</code></pre>
      </div>
    </section>
  </div>

@end

@pushTo('head')
  <link rel="stylesheet" href="/lazy/vendor/highlight/lazy.css">
@end

@pushTo('body')
  <script src="/lazy/vendor/highlight/highlight.min.js"></script>
  <script src="/lazy/vendor/highlight/lazy.js"></script>
  <script>
      hljs.addPlugin(new HljsLazyPlugin());
      hljs.highlightAll();
  </script>
@end