> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hotglue.com/llms.txt
> Use this file to discover all available pages before exploring further.

# enableCustomMapping

> Allow your tenants to configure custom mappings between settings

## Getting Started

To enable the custom mapping component for specific connectors, you can call the `enableCustomMapping` function.

```javascript theme={null}
 <script src="./dist/widget.js" ></script>
    <script>
      const hotglue = new Hotglue({
        tenantId: <your-tenant-id>,
        environmentId: <your-environment-id>,
        apiKey: <your-api-key>,
        jwt: <tenant-jwt>
      });

      // Pass an array of connector IDs that should have custom mapping enabled
      hotglue.enableCustomMapping(['shopify', 'stripe', 'hubspot']);
    </script>
</script>
```

<Frame caption="Source to Target Custom Mapping Demo">
  <video src="https://mintcdn.com/hotglue/z9unVB_m1uGcpekz/widget-v3/images/CustomMappingDemo.mp4?fit=max&auto=format&n=z9unVB_m1uGcpekz&q=85&s=fb9d478bea18d98cbd30605248732cf7" controls autoplay loop muted data-path="widget-v3/images/CustomMappingDemo.mp4" />
</Frame>

## Sample Mapping Output

After saving their mapping, the following field will be added to the tenant's tenant-config.

```javascript theme={null}

  "hotglue_mapping": {
    "mapping": {
  "dynamics-bc": [
      {
        "source": "Supporters",
        "target": "Account",
        "fields": {
          "first_name": "FirstName",
          "last_name": "LastName",
          "email": "PersonEmail"
        }
      },
      {
        "source": "Contributions",
        "target": "GiftTransaction",
        "fields": {
          "givecloud_hgexid": "GiveCloud_Gift_Transaction_ID__c",
          "contribution_number": "Name"
        }
      }
    ] 
    } 
} 
```