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.
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
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.
- 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.