Conversejs Bootstrap 4 Conflict Fix
- Use conversejs chat on a site that is already using Bootstrap 4
- 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
backdrop: 'static', with:
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>
About the article Author:
Techleader of createIT, working in the IT sector for over 14 years. Innovator, author, and owner of an e-shop that he has been continuously developing for over 10 years. Currently, with his team of over 20 developers, he supervises all kinds of e-commerce projects of varied structure, characteristics, and size: from simple on-line shops for retail clients to advanced B2B platforms with support of multiple shopping carts, multiple languages, and integration with external systems. His work also involves modifying and expanding the existing platforms with millions of products in their databases, platforms that support variable pricing (several variants of the same product), dropshipping modules, integration with storage systems, integration with courier delivery services, and the last but not least, the optimization of scripts. By participating in a multitude of projects, he had the opportunity to “test out” all kinds of platforms (open-source, SaaS – Cloud-Hosted eCommerce Platforms) and dedicated platforms.
Hi, we are createIT!
As a passionate group of professionals with a love for Web and mobile technologies, we have been successfully serving our clients for the past 15 years. Through these years we have continuously striven to create the best IT solutions our clients seek.
Our 70+ developer team creates cutting-edge complex B2B and B2C web systems and apps as well as delivers top-notch direct outsourcing services.
We are located in Warsaw, Poland, in the heart of Europe. Concentrated on delivering durable web solutions of high integrity, we do not always try to be the cheapest. However, thanks to our location you will be surprised how reasonable our prices are.
Fluent in English we offer services worldwide. Among others, in countries such as the U.S.A., Great Britain, Germany, Australia, Sweden and Poland.