Skip to main content

Webchat JS SDK

Webchat JS SDK is a Javascript library that helps you integrate Filum chat functionality directly into your website.

Installation​

Copy this snippet and put it within the body tag of your website:

<script type="text/javascript" src="https://filum-assets.s3.ap-southeast-1.amazonaws.com/dist/filum_chat_latest.umd.js"></script>

Usage​

You can access the SDK via the window.filumChat object. The SDK has the following methods:

initialize(session)​

Initialize the chat widget with your organization's configuration. This method should be called before using any other methods.

window.filumChat.initialize({
  organizationId: 'your-organization-id',
  installedSourceId: 123
})

The session object accepts the following properties:

  • organizationId (required): Your organization's unique identifier
  • installedSourceId (required): The source identifier for this chat installation

show()​

Display the chat button on your website. The chat window will remain minimized until the user clicks on the button.

window.filumChat.show()

hide()​

Remove the chat widget completely from the page. Use this when you want to completely remove the chat functionality.

window.filumChat.hide()

maximize()​

Open the chat window. This can be useful if you want to programmatically open the chat for your users.

window.filumChat.maximize()

minimize()​

Minimize the chat window (showing only the chat button).

window.filumChat.minimize()

onMessage(callback)​

Register a callback function that will be triggered whenever a new message is received in the chat.

window.filumChat.onMessage((message) => {
  console.log('New message received:', message)
})

Example Implementation​

Here's a complete example of how to implement the Chat SDK on your website:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website with Filum Chat</title>
  </head>
  <body>
    <!-- Your website content -->

    <!-- Filum Chat SDK -->
    <script
      type="text/javascript"
      src="https://filum-assets.s3.ap-southeast-1.amazonaws.com/dist/filum_chat_latest.umd.js"
    ></script>
    <script>
      // Initialize the chat with your organization ID
      window.filumChat.initialize({
        organizationId: 'your-organization-id',
        installedSourceId: 123
      })

      // Show the chat button
      window.filumChat.show()

      // Listen for new messages
      window.filumChat.onMessage((message) => {
        console.log('New message:', message)
      })

      // Example of a button that opens the chat when clicked
      document
        .getElementById('open-chat-button')
        .addEventListener('click', () => {
          window.filumChat.maximize()
        })
    </script>
  </body>
</html>

Support​

Please contact the Filum Engineering Team if you encounter any issues integrating the SDK.