MetaCRM Widget

This guide provides instructions on how to implement and customize the MetaCRM Widget in your web application.

Follow the video tutorial or the installation guide below to set up your Customer Service Widget

MetaCRM Widget

API Key

• This API key auto-generated and is already included in the provided installation snippet below.

• If you need a new set of API keys for compliance or security reasons, you can use the regenerate button to do so. However, this will also generate a new set of installation snippets, which will need to be reintegrated into your website.

API Key

Website URL

• Provide the URL of your website where you want to install the Customer Service Widget.

• When switching from testing stage to production, make sure to change the domain name to maintain the functionality of the Customer Service Widget.

Domain Name

Installation

Installation Snippet

• Copy the provided installation snippet and paste it right before the closing </head> element as shown in the example below.

Installation Snippet

Second Tab

• Click check connection to see if the Customer Service Widget has been successfully installed.

Check Connection

SRI

• Turning on or off SRI will affect how your project handles product updates from us

• Turning on SRI will provide enhanced security but you will have to manually verify and install MetaCRM product updates.

• Turning off SRI will reduce maintenance effort but also lower protection against compromised updates.

Feature	SRI	Non-SRI
Security	Higher (integrity check)	Standard
Updates	Manual	Automatic
Compliance	Meets strict policies	May not meet all policies
Flexibility	Version-specific	Always latest

SRI

Update Process

• SRI Version: When a new version of the widget is released, you'll need to obtain the new integration code (including new js reference and integrity hash) from MetaCRM and update it in your implementation. This process ensures you're aware of updates but requires manual effort.

• Non-SRI Version: Updates are applied automatically. While this is convenient, it means changes could be introduced without your immediate knowledge. It's important to stay informed about widget updates through MetaCRM's communication channels.

Enhanced Address Identification Method (Strongly Recommended)

• We strongly recommend installing our Enhanced Address Identification Method so you can track all wallet connections, including non-browser wallets, such as WalletConnect.

• Please refer to the example code above and consult your devs on how to install Enhanced Address Identification Method.

Enhanced Address Identification Method

---

Advanced Features

Hiding Widget on Specific Pages

You can dynamically hide or show the widget based on the current page or route using the window.MetaCRMWidget.setHide() function. Here’s a example of how to hide the widget on specific pages of your React application:

1. Import necessary dependencies:

   import React, { useEffect } from 'react'
   import { useLocation } from 'react-router-dom'
   

2. Use the useLocation hook to detect the current path:

   const location = useLocation();
   

3. Implement the useEffect hook to control widget visibility:

   useEffect(() => {
     if (window?.MetaCRMWidget?.setHide) {
       if(location.pathname === '/objective'){
         window.MetaCRMWidget.setHide(true);
       } else {
         window.MetaCRMWidget.setHide(false);
       }
     }
   }, [location]);
   

This code will hide the widget when the user navigates to the '/objective' path and show it on all other pages.

Hide Widget Launcher Icon by Default

To hide the widget launcher icon automatically when the page loads, add the launcherIconHidden: true option to the widget initialization:

MetaCRMWidget.init({
  apiKey: 'your-api-key',
  launcherIconHidden: true,
});

With this configuration, the widget launcher icon will remain hidden by default upon page load.

This feature allows you to customize the MetaCRM Widget’s behavior to better align with your application’s needs and enhance the user experience.

Automatically Open Widget on New Notifications

To automatically open the widget when a new notification is received, add the autoOpenNewNotification: true option to the widget initialization:

MetaCRMWidget.init({
  apiKey: 'your-api-key',
  autoOpenNewNotification: true,
});

This configuration ensures that the widget opens automatically whenever a new notification arrives, providing users with immediate visibility.

By enabling this feature, you can tailor the MetaCRM Widget’s behavior to align with your application’s needs and enhance the overall user experience.

Delaying Script Load

You can delay loading the widget until a specific user action occurs.

To delay the loading of the widget script:

1. Add the delayLoad: true option to the MetaCRMWidget.init() function:

   MetaCRMWidget.init({
     apiKey: 'your-api-key',
     delayLoad: true,
   });
   

2. Create a button or trigger to load the widget when needed:

   <button onClick={() => {
     const event = new CustomEvent('MetaCRMInit', {});
     document.dispatchEvent(event);
   }} type='button'>Load Widget</button>
   

This approach allows you to control when the widget is loaded, which can be useful for improving initial page load times or conditionally loading the widget based on user interactions

Opening Widget by Default

To have the widget open automatically when the page loads, simply add the defaultOpen: true option to the widget initialization:

MetaCRMWidget.init({
  apiKey: 'your-api-key',
  defaultOpen: true,
});

This configuration will ensure that the widget is open by default when the page loads, providing immediate visibility to users.

By implementing these features, you can customize the behavior of the MetaCRM Widget to best suit your application's needs and user experience requirements.

Manual Wallet Connection

Manual wallet connection ensures the widget always has the correct, current wallet address, especially useful when:

1. Your site uses custom wallet connection methods.

2. You're using specific Web3 libraries not automatically detected by the widget.

3. Your application supports multiple chains or has complex connection flows.

Without manual connection, the widget may not always be in sync with your application's wallet state.

Here’s a React example using wagmi:

import React, { useEffect } from 'react';
import { useAccount } from "wagmi";

const YourComponent = () => {
  const { address } = useAccount();

  useEffect(() => {
    if (window?.MetaCRMWidget?.manualConnectWallet) {
      window.MetaCRMWidget.manualConnectWallet(address);
    }
    
    const handleConnectWidget = () => {
      window.MetaCRMWidget.manualConnectWallet(address);
    };
    document.addEventListener('MetaCRMLoaded', handleConnectWidget);
    return () => {
      document.removeEventListener('MetaCRMLoaded', handleConnectWidget);
    };
  }, [address]);

  // Rest of your component
};

This implementation does the following:

• It calls manualConnectWallet immediately if the widget is already loaded.

• It sets up an event listener for 'MetaCRMLoaded' to connect the wallet when the widget loads.

• It cleans up the event listener when the component unmounts.

Note: If your application doesn't use wagmi, you'll need to replace the useAccount hook with whatever method you're using to obtain the wallet address.

Remember to call manualConnectWallet whenever the wallet address changes in your application to keep the widget in sync.

By implementing manual wallet connection, you ensure that the MetaCRM Widget is always aware of the current wallet address, allowing for seamless integration with your application's existing wallet management system.