Deploy Button

Deploy public Git projects with the Deploy Button, providing an easy-to-use flow to set up new projects with Vercel and GitHub, GitLab, or Bitbucket.

An example Deploy Button using the following HTML snippet.

Snippets

Use the snippets below in your Git repositories or your dashboards for users to deploy.

Markdown

HTML

URL

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world)

A Markdown snippet that shows a linked Deploy Button.

Generate Your Own

Customize the above Deploy Button snippets starting with a public Git repository URL from GitHub, GitLab, or Bitbucket.

Git Repository

Learn more about the Git Repository URL parameter →

You can customize the Deploy Flow and created project with the following additional settings. For more information see the URL Parameter Reference.

Environment Variables

Define Environment Variable Keys that the Git repository needs to deploy successfully. The values will be filled in by the user.

Environment Variables Keys

Learn more about the Environment Variable parameters →

Add a description with additional information and a link to documentation that helps users understand what they are providing values for.

Environment Variables Description

Environment Variables Link

Defaults

If you're setting up a project on behalf of the user and already know what name the user likely wants, enter a default project name. Additionally, fill this in for the repository name.

Set a default repository name for the new Git repository created by the user in the Deploy Flow.

Default Project Name

Default Git Repository Name

Redirect

The Redirect URL parameter allows you to redirect the user back to your platform on the event of a successful deployment and receive information on the created project.

Redirect URL

Learn more about the Redirect URL parameter →

Set a Developer ID to show a logo and name from an Integration by using its Client ID, found in the Integration Developer Console.

Developer ID

Learn more about the Developer ID parameter →

Set a name for a Deploy Hook to receive a Deploy Hook URL in return when redirecting the user from the import flow.

Deploy Hook Name

Learn more about the Deploy Hook parameter →

How Does it Work?

The Deploy Button allows users to deploy a new project through the Vercel Import Flow, while cloning the source Git repository to GitHub, GitLab, or Bitbucket.

You can create your Deploy Button with the generator above.

Import Flow

The Vercel Import Flow allows users to deploy a Git repository, create a project with Vercel, and clone the source repository into their GitHub, GitLab, or Bitbucket account.

The Vercel Import Flow deploying a Next.js and DatoCMS project.

URL Parameter Reference

With the Vercel Import Flow, you can add various URL query parameters to control the experience a user will have, depending on the requirements of your project.

The base of the Deploy Button URL is the Vercel Git Import Flow, found at https://vercel.com/import/git.

Note: The following is a reference of what each parameter achieves within a Deploy Button URL. Use the Deploy Button Generator to create your own Deploy Button.

Repository URL

Parameter: s
Value: The source Git repository URL.
Type: String

The Repository URL parameter allows you to define a Git repository URL, optionally including the subdirectory within a repository, that users will clone into their GitHub, GitLab, or Bitbucket account when going through the Vercel Import Flow.

https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world

An example Deploy Button source URL using the s Repository URL parameter.

Note: The Repository URL parameter is required when sending a user to the Vercel Import Flow to set up a project from a GitHub, GitLab, or Bitbucket repository.

Required Environment Variables

Parameter: env
Value: A comma-separated list of required Environment Variable keys e.g., TEST_KEY,TEST_API_KEY.
Type: String []

The Required Environment Variables parameter allows you to require users to fill in values of Environment Variables the new project needs to run successfully.

https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world&env=PUBLIC_API_KEY,API_SECRET_KEY

An example Deploy Button source URL using the env parameter.

Note: You cannot pass Environment Variable values using this parameter due to the URL being saved in the browser history, and thus not being a secure method.

Environment Variables Description

Parameter: envDescription
Value: A short description of the Required Environment Variables.
Type: String

The Environment Variables Description parameter allows you to define a URL encoded string that describes to a user what the Required Environment Variables are used for.

Note: The description provided through this parameter will only show if Required Environment Variables are set.

An example Required Environment Variables section using the Environment Variable Description parameter to add context.

https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world&env=PUBLIC_API_KEY,API_SECRET_KEY&envDescription=Enter%20your%20public%20API%20Key.

An example Deploy Button source URL using the envDescription parameter.

Environment Variables Link

Parameter: envLink
Value: A link to an explanation of the Required Environment Variables.
Type: String

The Environment Variable Link parameter allows you to attach a link to external documentation that helps the user find more information about where the values for the Environment Variables can be found and what they are for.

Note: The description provided through this parameter will only show if Required Environment Variables are set.

An example Required Environment Variables section using the Environment Variable Link parameter to add context.

https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world&env=PUBLIC_API_KEY,API_SECRET_KEY&envDescription=Enter%20your%20public%20API%20Key.&envLink=https%3A%2F%2Fvercel.com%2Fdocs

An example Deploy Button source URL using the envLink parameter.

Note: The snippet above is just an example of using a URL with the envLink parameter. Please provide users with a specific link instead of top-level documentation.

Redirect URL

Parameter: redirect-url
Value: The URL to redirect the user to in the event of a successful deployment.
Type: String

The Redirect URL parameter allows you to define a URL, other than the newly created Vercel project, to send the user to after a successful deployment.

This parameter is helpful if you are sending a user from an application, to deploy a project with Vercel, but want the user to continue with your application with a project created and deployed.

An example of the redirect UI when a Redirect URL parameter is used.

https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world&redirect-url=my-headless-application.com

An example Deploy Button source URL using the redirect-url parameter.

Note: Provide a custom name and logo for the redirect UI by using the Developer ID parameter.

Callback Parameters

Vercel additionally attaches some "Callback Parameters" to the defined Redirect URL when the user is redirected. The following parameters give you access to information about the project the user has created and deployed, for you to integrate with Vercel after the user is sent back to you.

Parameter	Description
`project-dashboard-url`	This defines the Vercel Project View URL of the project that was created through the import flow.
`deployment-dashboard-url`	This defines the Vercel Deployment View URL of the deployment that was created through the import flow.
`deployment-url`	This defines the URL of the deployment that was created through the import flow. This contains the default production domain that was automatically generated for the project that was created.
`repository-url`	This defines the URL of the Git repository that was created through the Import Flow, within the user's selected Git account (GitHub, GitLab, or Bitbucket).
`production-deploy-hook-url` (conditional)	This defines the URL of a Deploy Hook. Requires the `production-deploy-hook` parameter.

Developer ID

Parameter: developer-id
Value: Integration Client ID.
Type: String

The Developer ID parameter allows you to define a Vercel Integration Client ID which will then attach your logo and name to the UI when using the Redirect URL parameter.

You can find the Developer ID listed as "Client ID" in your Integrations Developer Console.

An example of the redirect UI with a Developer logo and name when the Redirect URL and Developer ID parameters are used.

Note: This parameter requires the Redirect URL parameter to be set and also that the Integration website field matches the Redirect URL value.

https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world&redirect-url=https%3A%2F%2Fmy-headless-application.com&developer-id=oac_7rUTiCMow23Gyfao9RQQ3Es2

An example Deploy Button source URL using the redirect-url and the developer-id parameters.

Deploy Hook

Parameter: production-deploy-hook
Value: Name of the Deploy Hook to set up.
Type: String

The Deploy Hook parameter allows you to receive a URL when also using the Redirect URL parameter, which you can use to redeploy user's projects for them.

This is useful if you are directing a user to deploy a project that works with your application, for example a headless CMS, and you need to redeploy the user's project in case of a content change that needs to be rebuilt.

The value of this parameter should be the name of the Deploy Hook you want to create for the user.

When redirected back to your application upon a successful deployment for the user, you will get the production-deploy-hook-url callback parameter in addition to the default callback parameters.

Note: This parameter requires the Redirect URL parameter to also be set.

https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world&redirect-url=https%3A%2F%2Fmy-headless-application.com&production-deploy-hook=MyHeadlessProject

An example Deploy Button source URL using the redirect-url and the production-deploy-hook parameters.

Project Name

Parameter: project-name
Value: A default project name.
Type: String

The Project Name parameter allows you to define a default project name.

This parameter is useful for cases where already know what the user would like to name their project. For example, if you are sending the user to the Import Flow from an application that has already set up a project for the user that will connect to the created Vercel project.

Note: If there is an existing project using the name passed with this parameter, the user will be required to define a new project name, and therefore the project is not guaranteed to have the specified name.

https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world&project-name=my-awesome-project

An example Deploy Button source URL using the project-name parameter.

Repository Name

Parameter: repository-name
Value: A default repository name (no spaces).
Type: String

The Repository Name parameter allows you to define a default project name.

Similar to the Project Name parameter, this parameter is useful in cases where you already know what the user wants to name their repository.

https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world&repository-name=my-awesome-project

An example Deploy Button source URL using the repository-name parameter.

Was this helpful?