Skip to main content

​
Select your framework

  • HTML
  • Vanilla JS
  • React
  • Angular
  • Vue.js 2
The <zapier-mcp> element can be used directly in HTML. Add the script to the <head> and use the <zapier-mcp> element in your body.Add this script tag to your HTML <head>:
<script src="https://mcp.zapier.com/embed/v1/mcp.js"></script>

​
Body

Add the <zapier-mcp> element to your HTML body:
<zapier-mcp

embed-id="FILL_IN_YOUR_EMBED_ID"
width="100%"
height="600px"
sign-up-email="email_of_your_user@example.com"
sign-up-first-name="first_name_of_your_user"
sign-up-last-name="last_name_of_your_user"

> </zapier-mcp>

<script>
document.querySelector('zapier-mcp').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);
});

document.querySelector('zapier-mcp').addEventListener('tools-changed', (event) => {
// this is sent whenever a user adds/removes tools from their MCP server
console.log('Tools changed');
});

document.querySelector('zapier-mcp').addEventListener('close-requested', (event) => {
// this is sent when the user clicks the close button in the embed
});
</script>

​
Available Attributes

The <zapier-mcp> element supports the following attributes:
​
embed-id
string
required
The unique identifier for your embed.
​
width
string
default:"100%"
Width of the embed.
​
height
string
default:"600px"
Height of the embed.
​
class-name
string
CSS class to apply to the iframe.

​
Event Reference

The <zapier-mcp> element dispatches the following events:
​
mcp-server-url
CustomEvent
Fired when an MCP server URL is received. event.detail.serverUrl contains the URL.
​
tools-changed
CustomEvent
Fired when available tools change. Use a tools/list request from your MCP client to get the updated list of tools.
​
close-requested
CustomEvent
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.
​
sign-up-email
string
User’s email address for quick account creation.
​
sign-up-first-name
string
User’s first name for quick account creation.
​
sign-up-last-name
string
User’s last name for quick account creation.