Conversejs Bootstrap 4 conflict fix

CHALLENGE: Use conversejs chat on a site that is already using Bootstrap 4

SOLUTION: Edit plugin source and change data attribute name to resolve the conflict between Boostrap Native and Boostrap Framework

Converse.js is an open-source XMPP chat in the browser, one that is easy to set up and integrate into your own website. The solution has a vast community, with over 130 people contributing additional features, bugfixes and language support. 

Version 5.0.5 release included multiple improvements: preventing the editing of sent file uploads, fixing new message notifications for a minimized chat stack on top of each other and now chats are hidden behind the controlbox on mobile. Conversejs as a javascript plugin is often updated with bug-fixes and new features, it’s using Bootstrap Native Library for UI. BSN is just a Boostrap framework, but without jQuery dependency.

Our website was already using Bootstrap 4 framework, and turns out that enqueuing https://cdn.conversejs.org/5.0.5/dist/converse.min.js created some conflicts on the page:

• Bootstrap tabs weren’t working correctly
• Issues with the modal backdrop layer

A fix for making converse.js chat working correctly with BS4 (BSN conflict)

• Instead of using CDN – just create a custom build, or use static js file for converse.min.js
• Replace all occurrences of data-toggle with data-cttoggle
• Change modal initialize() function: replace

backdrop: 'static'

with

backdrop: false

Summary
That’s it. Now BoostrapNative from converse.js is using custom data attribute name and will not be in conflict with the original Boostrap Framework.

More info

• Generating a custom build for conversejs: https://conversejs.org/docs/html/builds.html
• Use a static file instead CDN:

<script src="/js/converse.js" charset="utf-8"></script>

Follow us for other useful tips and guidelines.