Empower Your Chat: Using Dialogoo's JS Webhooks

In the dynamic world of online communities, customization is key to offering a personalized user experience. Dialogoo's new JavaScript (JS) webhooks feature empowers webmasters to customize chat actions, creating a more engaging and tailored experience for their users. This article explores how to effectively utilize these webhooks to enhance your chat platform.

Understanding Dialogoo's JS Webhooks

Webhooks are a powerful tool that allows developers to execute custom code in response to certain events within Dialogoo's chat platform. With Dialogoo's JS webhooks, you can react to specific chat actions such as message sending and webcam starting or stopping. This flexibility enables you to modify or enhance user interactions in real-time.

Key Webhook Events

  • beforeMessageSending / afterMessageSending: fire before/after any text message sends, room or private; the "before" one can cancel or rewrite the message.
  • beforePrivateMessageSending / afterPrivateMessageSending: fire in addition to the two above, only when the message being sent is a private message.
  • beforePrivateMessageReceiving / afterPrivateMessageReceiving: fire when a private message arrives from someone else; "before" can't stop the sender's message from being recorded, only whether it's shown to you.
  • beforeWebcamStart / afterWebcamStart: fire before/after a visitor starts broadcasting their own webcam.
  • beforeWebcamStop / afterWebcamStop: fire before/after a visitor stops their own webcam.
  • beforeWebcamWatchStart / afterWebcamWatchStart: fire when a visitor starts watching someone else's webcam.
  • beforeWebcamWatchStop / afterWebcamWatchStop: fire when a visitor stops watching someone else's webcam.

Every before* event is cancelable via event.preventDefault(); the message-related ones also let you rewrite the text via event.text instead of just blocking it. Every after* event is informational only.

How to Implement JS Webhooks

To start using Dialogoo's JS webhooks, access your Panel and navigate to the Developer section. There, you will find documentation on how to attach your custom JS code to these events. This setup allows you to execute custom logic or integrate third-party services seamlessly.

Practical Use Cases

Here are some practical applications of JS webhooks in your chat environment:

  • Moderation Enhancements: Use beforeMessageSending to implement advanced filtering or profanity checks, ensuring that all messages adhere to community guidelines.
  • Personalized Notifications: With afterMessageSending, send personalized notifications or alerts to users, enhancing their experience and engagement.
  • Webcam Access Management: Through beforeWebcamStart, enforce access rights or parental controls, providing a safer environment for all users.
  • Analytics and Insights: Use afterWebcamStart and afterWebcamStop to gather data on user interactions, helping you analyze engagement patterns and improve services.

Code Examples for Each Webhook

Here's a minimal, working example for every event pair. Paste any of these into your Custom JS field (Panel → Developer → Embed) to try it live.

beforeMessageSending / afterMessageSending

Fires for every text message send, room or private. beforeMessageSending is cancelable, and event.text can be rewritten before it's actually sent:

window.DialogooChat.on('beforeMessageSending', function (event) {
  if (event.text.includes('badword')) {
    event.preventDefault(); // block the message
  }
  // Or rewrite it instead of blocking it:
  // event.text = event.text.replace(/badword/gi, '***');
});

window.DialogooChat.on('afterMessageSending', function (event) {
  console.log('Message sent:', event.text);
});

beforePrivateMessageSending / afterPrivateMessageSending

Fire in addition to the pair above, only when the message being sent is a private message:

window.DialogooChat.on('beforePrivateMessageSending', function (event) {
  console.log('Sending a PM to user', event.toUserId);
  // event.preventDefault(); to block it, or rewrite event.text, same as above
});

window.DialogooChat.on('afterPrivateMessageSending', function (event) {
  console.log('PM sent to', event.toUserId, ':', event.text);
});

beforePrivateMessageReceiving / afterPrivateMessageReceiving

An incoming PM has already reached the server and this visitor's browser by the time this fires, so beforePrivateMessageReceiving can't stop the sender's message from being recorded — only whether it's shown locally:

window.DialogooChat.on('beforePrivateMessageReceiving', function (event) {
  // Silently drop PMs from a blocked list your own script keeps.
  if (myBlockedUserIds.includes(event.fromUserId)) {
    event.preventDefault();
  }
});

window.DialogooChat.on('afterPrivateMessageReceiving', function (event) {
  console.log('PM from', event.fromUsername, ':', event.text);
});

beforeWebcamStart / afterWebcamStart

beforeWebcamStart is cancelable — useful for gating your own webcam behind a custom check:

window.DialogooChat.on('beforeWebcamStart', function (event) {
  if (!userIsVerified()) {
    event.preventDefault(); // block the webcam from starting
  }
});

window.DialogooChat.on('afterWebcamStart', function () {
  console.log('Webcam is now live');
});

beforeWebcamStop / afterWebcamStop

window.DialogooChat.on('beforeWebcamStop', function (event) {
  console.log('Webcam is about to stop');
});

window.DialogooChat.on('afterWebcamStop', function () {
  console.log('Webcam has stopped');
});

beforeWebcamWatchStart / afterWebcamWatchStart

These fire when a visitor watches someone else's webcam, as opposed to starting their own above:

window.DialogooChat.on('beforeWebcamWatchStart', function (event) {
  console.log('About to watch', event.username);
  // event.preventDefault(); to block watching, e.g. behind an age check
});

window.DialogooChat.on('afterWebcamWatchStart', function (event) {
  console.log('Now watching', event.username);
});

beforeWebcamWatchStop / afterWebcamWatchStop

window.DialogooChat.on('beforeWebcamWatchStop', function (event) {
  console.log('About to stop watching user', event.userId);
});

window.DialogooChat.on('afterWebcamWatchStop', function (event) {
  console.log('Stopped watching user', event.userId);
});

Use window.DialogooChat.off(type, handler) at any point to remove a handler you registered earlier.

Benefits of Using JS Webhooks

By implementing JS webhooks, you gain greater control over the user experience within your chat platform. This not only enhances user satisfaction but also allows you to integrate with other systems, providing a seamless experience across your digital ecosystem.

To learn more about how Dialogoo can transform your chat community, explore our full feature list and see how other clients are leveraging these tools.

Conclusion

Dialogoo's JS webhooks open up a world of possibilities for webmasters aiming to deliver a customized and dynamic chat experience. By tapping into these features, you can not only meet user expectations but exceed them, creating a thriving online community. Get started today by signing up for a free trial at our registration page.