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.
Snippets
Use the snippets below in your Git repositories or your dashboards for users to deploy.
Generate Your Own
Customize the above Deploy Button snippets starting with a public Git repository URL from GitHub, GitLab, or Bitbucket.
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.
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.
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
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
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.
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.
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.
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
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.
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
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.
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
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.
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
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.
https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fhello-world&project-name=my-awesome-project
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