# MetaCRM Widget

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

{% embed url="<https://youtu.be/7bxtuDAPQUU>" %}
MetaCRM Widget
{% endembed %}

## 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.*

<figure><img src="/files/kW9K7U7PZ5Xr2vyq88Ip" alt=""><figcaption><p>API Key</p></figcaption></figure>

## Website URL

* Provide the URL of your website where you want to install the Customer Service Widget.&#x20;
* *When switching from testing stage to production, make sure to change the domain name to maintain the functionality of the Customer Service Widget.*

<figure><img src="/files/am9a28GNoJPGXUlmwLjT" alt=""><figcaption><p>Domain Name</p></figcaption></figure>

## Installation

{% tabs %}
{% tab title="Installation Snippet" %}

* Copy the provided installation snippet and paste it right before the closing \</head> element as shown in the example below.&#x20;

<figure><img src="/files/J4QeJpANjtuJ4oiILltq" alt=""><figcaption><p>Installation Snippet</p></figcaption></figure>
{% endtab %}

{% tab title="Second Tab" %}

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

<figure><img src="/files/czoxVztapngLVR2e38JW" alt=""><figcaption><p>Check Connection</p></figcaption></figure>
{% endtab %}

{% tab title="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.&#x20;

<table><thead><tr><th width="139">Feature</th><th width="253">SRI</th><th>Non-SRI</th></tr></thead><tbody><tr><td>Security</td><td>Higher (integrity check)</td><td>Standard</td></tr><tr><td>Updates</td><td>Manual</td><td>Automatic</td></tr><tr><td>Compliance</td><td>Meets strict policies</td><td>May not meet all policies</td></tr><tr><td>Flexibility</td><td>Version-specific</td><td>Always latest</td></tr></tbody></table>

<figure><img src="/files/Nq5swsIF3n3b4vkYFtrD" alt=""><figcaption><p>SRI</p></figcaption></figure>

#### 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.
  {% endtab %}
  {% endtabs %}

## 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.&#x20;

<figure><img src="/files/iZPluFqMPuMEkQj4AM94" alt=""><figcaption><p>Enhanced Address Identification Method</p></figcaption></figure>

***

## 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:

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

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

   ```jsx
   const location = useLocation();

   ```
3. Implement the `useEffect` hook to control widget visibility:

   ```jsx
   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:

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

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

   ```html
   <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:

```jsx
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:

```jsx
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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://metacrm.gitbook.io/metacrm/settings/general/integration/metacrm-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.