coder · jsjoeio · Sep 22, 2022 · Sep 19, 2022 · Sep 20, 2022 · Sep 20, 2022
diff --git a/docs/admin/open-in-coder.md b/docs/admin/open-in-coder.md
@@ -0,0 +1,27 @@
+# Open in Coder Button
+
+Add a Markdown button to your project's `README.md` to get your developers up and running with Coder with a few clicks.
+
+A basic example looks like this:
+
+```markdown
+[![Open in Coder](https://cdn.coder.com/embed-button.svg)](https://<deployment-url>/templates/<template-name>)
+```
+
+which renders like this:
+
+![Open in Coder](https://cdn.coder.com/embed-button.svg)
+
+You can customize this to take developers directly to your team's template. Read on to learn more.
+
+### Customization
+
+The underlying link for this button consists of the following pieces:
+- <deployment-url>: where your Coder deployment lives i.e. https://dev.coder.com
+- <template-name>: name of template i.e. coder
+
+### template name
+
+A template to redirect your developers to after they authenticate on your deployment.
+
+Example: https://dev.coder.com/templates/coder
diff --git a/docs/manifest.json b/docs/manifest.json
@@ -188,6 +188,11 @@
           "title": "Enterprise",
           "description": "Learn how to enable Enterprise features.",
           "path": "./admin/enterprise.md"
+        },
+        {
+          "title": "Open in Coder Button",
+          "description": "Learn how to create an 'Open in Coder' button.",
+          "path": "./admin/open-in-coder.md"
         }
       ]
     },

diff --git a/dogfood/README.md b/dogfood/README.md
@@ -1,5 +1,7 @@
 # dogfood template
 
+[![Open in Coder](https://cdn.coder.com/embed-button.svg)](https://dev.coder.com/templates/coder)
+
 Ammar is this template's admin.
 
 ## Personalization

diff --git a/site/src/pages/TemplatePage/TemplatePage.tsx b/site/src/pages/TemplatePage/TemplatePage.tsx
@@ -1,5 +1,8 @@
+import { makeStyles } from "@material-ui/core/styles"
 import { useMachine, useSelector } from "@xstate/react"
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"
+import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
+import { Margins } from "components/Margins/Margins"
 import { FC, useContext } from "react"
 import { Helmet } from "react-helmet-async"
 import { useTranslation } from "react-i18next"
@@ -23,6 +26,7 @@ const useTemplateName = () => {
 }
 
 export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
+  const styles = useStyles()
   const organizationId = useOrganizationId()
   const { t } = useTranslation("templatePage")
   const templateName = useTemplateName()
@@ -40,6 +44,7 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
     templateVersions,
     deleteTemplateError,
     templateDAUs,
+    getTemplateError,
   } = templateState.context
   const xServices = useContext(XServiceContext)
   const permissions = useSelector(xServices.authXService, selectPermissions)
@@ -50,6 +55,16 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
     templateSend("DELETE")
   }
 
+  if (templateState.matches("error") && Boolean(getTemplateError)) {
+    return (
+      <Margins>
+        <div className={styles.errorBox}>
+          <ErrorSummary error={getTemplateError} />
+        </div>
+      </Margins>
+    )
+  }
+
   if (isLoading) {
     return <Loader />
   }
@@ -90,4 +105,10 @@ export const TemplatePage: FC<React.PropsWithChildren<unknown>> = () => {
   )
 }
 
+const useStyles = makeStyles((theme) => ({
+  errorBox: {
+    padding: theme.spacing(3),
+  },
+}))
+
 export default TemplatePage
diff --git a/site/src/xServices/template/templateXService.ts b/site/src/xServices/template/templateXService.ts
@@ -25,6 +25,7 @@ interface TemplateContext {
   templateVersions?: TemplateVersion[]
   templateDAUs: TemplateDAUsResponse
   deleteTemplateError?: Error | unknown
+  getTemplateError?: Error | unknown
 }
 
 type TemplateEvent = { type: "DELETE" } | { type: "CONFIRM_DELETE" } | { type: "CANCEL_DELETE" }
@@ -71,6 +72,12 @@ export const templateMachine =
                 target: "initialInfo",
               },
             ],
+            onError: [
+              {
+                actions: "assignGetTemplateError",
+                target: "error",
+              },
+            ],
           },
         },
         initialInfo: {
@@ -211,6 +218,9 @@ export const templateMachine =
         deleted: {
           type: "final",
         },
+        error: {
+          type: "final",
+        },
       },
     },
     {
@@ -257,6 +267,9 @@ export const templateMachine =
         assignActiveTemplateVersion: assign({
           activeTemplateVersion: (_, event) => event.data,
         }),
+        assignGetTemplateError: assign({
+          getTemplateError: (_, event) => event.data,
+        }),
         assignTemplateResources: assign({
           templateResources: (_, event) => event.data,
         }),