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

    Digital marketing without third-party cookies – new rules
    • Technology
    • Trends

    Digital marketing without third-party cookies – new rules

    February 21, 2024 by createIT
    eCommerce healthcheck
    • Services
    • Trends

    eCommerce healthcheck

    January 24, 2024 by createIT
    Live Visitor Count in WooCommerce with SSE
    • Dev Tips and Tricks

    Live Visitor Count in WooCommerce with SSE

    December 12, 2023 by createIT
    Calculate shipping costs programmatically in WooCommerce
    • Dev Tips and Tricks

    Calculate shipping costs programmatically in WooCommerce

    December 11, 2023 by createIT
    Designing a cookie consent modal certified by TCF IAB
    • Dev Tips and Tricks

    Designing a cookie consent modal certified by TCF IAB

    December 7, 2023 by createIT
    Understanding the IAB’s Global Vendor List (GVL)
    • Dev Tips and Tricks

    Understanding the IAB’s Global Vendor List (GVL)

    December 6, 2023 by createIT
    Effortlessly transform JSON data into a clear schema
    • Uncategorized

    Effortlessly transform JSON data into a clear schema

    December 5, 2023 by createIT
    Anatomy of WordPress malware: a technical deep dive
    • Dev Tips and Tricks
    • Technology

    Anatomy of WordPress malware: a technical deep dive

    December 4, 2023 by createIT
    Initializing CMP with the Stub Script and cmpapi.js
    • Dev Tips and Tricks

    Initializing CMP with the Stub Script and cmpapi.js

    November 29, 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