Push the limits of your Adobe Commerce store with MagePal Extension

Take your Adobe Commerce store to new heights with the power of MagePal extensions. Our expertly crafted code and rigorous testing ensure seamless integration with Adobe Commerce, giving you the freedom to focus on growing your business, not debugging. Upgrade your store's potential with MagePal.

How to use Drift Chat Magento 2

What is Drift Chat Widget

Drift is a comprehensive communication platform for sales and marketing teams. It features live chat, in-app messaging, and email management capabilities, all of which are delivered via the cloud. Customizable chat widgets, automatic email follow-ups for missed chats, conversation history tracking, automation for email campaigns, and an AI-powered chatbot.

How to add Drift Chat to Magento 2 / Adobe Commerce

Log in to your Drift Account and download your chat code snippet

Using either Google Tag Manager or copy the JavaScript code to your header section in admin by going to Content -> Design -> Design Configuration -> Edit -> Default Store View -> Footer -> Miscellaneous HTML

Drift Chat Widget Will Not Display on My Magento 2 Store

To prevent card skimmers, session hijacking, clickjacking and more, the latest (Magento 2.3.5, 2.4.0) comes default will Content Security Policies (CSP) enabled. Content Security Policies are a powerful tool to mitigate against Cross Site Scripting (XSS) and related attacks and more. Web servers send CSPs in response HTTP headers (namely Content-Security-Policy and Content-Security-Policy-Report-Only) to browsers that whitelist the origins of scripts, styles, and other resources. Together, CSPs and built-in browser features help prevent:

• Loading a malicious script from an attacker’s website
• A malicious inline script from sending credit card info to an attacker’s website
• Loading a malicious style that will make users click on an element that wasn’t supposed to be on a page

Learn more about Content Security Policies / CSP and Securing Drift on your Site

To get Drift to display on your site you will need to add their domain allow list policy (like script-src, style-src, font-src and others) by adding a csp_whitelist.xml to your custom module’s etc folder.

csp_whitelist.xml

<?xml version="1.0"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
    <policies>
        <policy id="script-src">
            <values>
                <value id="custom-csp-drift-js" type="host">https://js.driftt.com</value>
                <value id="custom-csp-drift-widget" type="host">https://widget.drift.com</value>
            </values>
        </policy>
        <policy id="frame-src">
            <values>
                <value id="custom-csp-drift-js" type="host">https://js.driftt.com</value>
                <value id="custom-csp-drift-widget" type="host">https://widget.drift.com</value>
            </values>
        </policy>
        <policy id="media-src">
            <values>
                <value id="custom-csp-drift-js" type="host">https://js.driftqa.com/</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Learn More About MagePal Extension

Is your Magento store ready for the future? Say hello to the new Google Analytics 4, which is built from the ground up with all-new features and advanced machine learning technology.

GA4 Extension

Related

• Integrate Magento 2 with Segment IO
• How To Create a Custom Magento 2 Maintenance Page
• A Step-by-Step Guide Customizing Your Magento Theme
• Optimizing Your Magento Site for Mobile Devices: A Complete Guide