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.
