Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.

    Tags

    Conversejs Bootstrap 4 Conflict Fix

    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

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

    Follow us for other useful tips and guidelines.

    Comments
    0 response

    Add comment

    Your email address will not be published. Required fields are marked *

    Popular news

    A game changer for WooCommerce users
    • Our Highlights

    A game changer for WooCommerce users

    March 24, 2023 by createIT
    The differences between a web app and a mobile app
    • Services
    • Technology
    • Trends

    The differences between a web app and a mobile app

    March 7, 2023 by createIT
    Webrooming and showrooming
    • Trends

    Webrooming and showrooming

    February 14, 2023 by createIT
    PHPStorm – fix long load time of a directory window
    • Dev Tips and Tricks

    PHPStorm – fix long load time of a directory window

    January 20, 2023 by createIT
    reCAPTCHA v3 – WordPress implementation
    • Dev Tips and Tricks

    reCAPTCHA v3 – WordPress implementation

    January 20, 2023 by createIT
    How to compare GIT and server files
    • Dev Tips and Tricks

    How to compare GIT and server files

    January 19, 2023 by createIT
    How to trigger a click event inside iframe?
    • Dev Tips and Tricks

    How to trigger a click event inside iframe?

    January 19, 2023 by createIT
    FOOEvents – generate a custom CSV report
    • Dev Tips and Tricks

    FOOEvents – generate a custom CSV report

    January 19, 2023 by createIT
    Headless chrome – testing webgl using playwright
    • Dev Tips and Tricks

    Headless chrome – testing webgl using playwright

    January 18, 2023 by createIT
    Preview big SQL files with PilotEdit
    • Dev Tips and Tricks

    Preview big SQL files with PilotEdit

    January 18, 2023 by createIT

    Support – Tips and Tricks
    All tips in one place, and the database keeps growing. Stay up to date and optimize your work!

    Contact us