> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zapier.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Getting Embed Code
> Generate embed code snippets for integrating Zapier MCP into your application.
## Select your framework
The `` element can be used directly in HTML. Add the script to the `` and use the `` element in your body.
### Head
Add this script tag to your HTML ``:
```html theme={null}
```
### Body
Add the `` element to your HTML body:
```html theme={null}
```
The Zapier MCP custom element can be used with vanilla JS. Use the JavaScript snippet to load the script and add a `` element.
### Javascript
```javascript theme={null}
// Load the MCP embed script
const script = document.createElement("script");
script.src = "https://mcp.zapier.com/embed/v1/mcp.js";
document.head.appendChild(script);
// Wait for script to load, then create and display zapier-mcp
script.onload = () => {
const element = document.createElement("zapier-mcp");
element.setAttribute("embed-id", "FILL_IN_YOUR_EMBED_ID");
element.setAttribute("width", "100%");
element.setAttribute("height", "600px");
element.setAttribute("sign-up-email", "email_of_your_user@example.com");
element.setAttribute("sign-up-first-name", "first_name_of_your_user");
element.setAttribute("sign-up-last-name", "last_name_of_your_user");
element.addEventListener('mcp-server-url', (event) => {
// this is the URL of the MCP server for a specific user
console.log('MCP Server URL:', event.detail.serverUrl);
});
element.addEventListener('tools-changed', (event) => {
// this is sent whenever a user adds/removes tools from their MCP server
console.log('Tools changed');
});
element.addEventListener('close-requested', (event) => {
// this is sent when the user clicks the close button in the embed
console.log('Close requested');
});
const container = document.querySelector("#zapier-mcp-container") || document.body;
container.appendChild(element);
};
```
Custom elements (web components) can be used with React. The example shows a TypeScript wrapper component with typed props for handling callbacks. Add the `jsx-types.d.ts` snippet for proper TypeScript support.
### HTML
Add the script to your HTML ``:
```html theme={null}
```
Now create a React component to use the `` element:
```ts twoslash ZapierMcp.tsx lines theme={null}
import { useEffect, useRef } from "react";
interface ZapierMcpProps {
embedId: string;
width?: string;
height?: string;
className?: string;
origin?: string;
signUpEmail?: string;
signUpFirstName?: string;
signUpLastName?: string;
onMcpServerUrl?: (serverUrl: string) => void;
onToolsChanged?: (tools: any[]) => void;
onCloseRequested?: () => void;
}
export const ZapierMcp = ({
embedId,
width = "100%",
height = "600px",
className,
origin,
signUpEmail,
signUpFirstName,
signUpLastName,
onMcpServerUrl,
onToolsChanged,
onCloseRequested,
}: ZapierMcpProps) => {
const mcpRef = useRef(null);
useEffect(() => {
const element = mcpRef.current;
if (!element) return;
const handleMcpServerUrl = (event: CustomEvent<{ serverUrl: string }>) => {
onMcpServerUrl?.(event.detail.serverUrl);
};
const handleToolsChanged = (event: CustomEvent<{ tools: any[] }>) => {
onToolsChanged?.();
};
const handleCloseRequested = () => {
onCloseRequested?.();
};
element.addEventListener('mcp-server-url', handleMcpServerUrl as EventListener);
element.addEventListener('tools-changed', handleToolsChanged as EventListener);
element.addEventListener('close-requested', handleCloseRequested);
return () => {
element.removeEventListener('mcp-server-url', handleMcpServerUrl as EventListener);
element.removeEventListener('tools-changed', handleToolsChanged as EventListener);
element.removeEventListener('close-requested', handleCloseRequested);
};
}, [onMcpServerUrl, onToolsChanged, onCloseRequested]);
return (
);
};
// Example usage:
export default function App() {
const handleMcpServerUrl = (serverUrl: string) => {
// this is the URL of the MCP server for a specific user
console.log('MCP Server URL:', serverUrl);
};
const handleToolsChanged = () => {
// this is sent whenever a user adds/removes tools from their MCP server
console.log('Tools changed:', tools);
};
const handleCloseRequested = () => {
// this is sent when the user clicks the close button in the embed
console.log('Close requested');
};
return (
Zapier MCP React
);
}
```
```ts jsx-types.d.ts (React 18) theme={null}
declare namespace JSX {
interface IntrinsicElements {
"zapier-mcp": any;
}
}
```
```ts jsx-types.d.ts (React 19) theme={null}
import "react";
declare module "react" {
namespace JSX {
interface IntrinsicElements {
"zapier-mcp": any;
}
}
}
```
Custom elements (web components) can be used with Angular. Use the following snippets as an example.
### Installation
Add the script to your ``:
```html theme={null}
```
And then use these components in your Angular application:
```html app.component.html theme={null}
Zapier MCP Angular
```
```ts app.component.ts theme={null}
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
onMcpServerUrl(event: CustomEvent) {
// this is the URL of the MCP server for a specific user
console.log("MCP Server URL:", event.detail.serverUrl);
}
onToolsChanged(event: CustomEvent) {
// this is sent whenever a user adds/removes tools from their MCP server
console.log("Tools changed");
}
onCloseRequested(event: CustomEvent) {
// this is sent when the user clicks the close button in the embed
console.log("Close requested");
}
}
```
```ts app.module.ts theme={null}
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
// -*-*-*- Add this line -*-*-*-
schemas: [CUSTOM_ELEMENTS_SCHEMA],
// -*-*-*-*-*-*-*-*-*-*-*-*-*-*-
})
export class AppModule {}
```
Custom elements (web components) can be used with Vue.js. Use the main.js and App.vue snippets as examples.
### Installation
Add the script to your ``:
```html theme={null}
```
And then use these components in your Vue application:
```html App.vue theme={null}
Zapier MCP Vue
```
```javascript main.js theme={null}
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
// -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
// Allow `` custom element
// -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
Vue.config.ignoredElements = ["zapier-mcp"];
new Vue({ render: (h) => h(App) }).$mount("#app");
```
## Available Attributes
The `` element supports the following attributes:
The unique identifier for your embed.
Width of the embed.
Height of the embed.
CSS class to apply to the iframe.
## Event Reference
The `` element dispatches the following events:
Fired when an MCP server URL is received. `event.detail.serverUrl` contains
the URL.
Fired when available tools change. Use a `tools/list` request from your MCP
client to get the updated list of tools.
Fired when the user requests to close the embed.
## Enable Quick Account Creation for your users (optional)
To enable Quick Account Creation, provide your user's email, first name, and last name to Zapier MCP. This will bypass Zapier sign-up for your users.
All three sign-up fields (`sign-up-email`, `sign-up-first-name`,
`sign-up-last-name`) must be provided together to enable quick account
creation.
User's email address for quick account creation.
User's first name for quick account creation.
User's last name for quick account creation.