---
title: Embed the UI in a page
description: Embed the email verification UI in a different page.
sidebar:
  order: 50
---

## Overview

If you are looking to render the email verification UI in a different page follow this guide.

## Before you start

Most of the updates require your attention if you are using the **pre-built UI** components.
If you are working with a **custom UI** you need to update the backend configuration, like in step **3.1**.


## Steps

### 1. Disable the default implementation 

:::note[If you are using a **custom UI** implementation, then you can skip this step.]
:::

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import SuperTokens from "supertokens-auth-react";
import EmailVerification from "supertokens-auth-react/recipe/emailverification";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    EmailVerification.init({
      mode: "REQUIRED",
      disableDefaultUI: true,
    }),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="script-tag example relies on globals provided by loaded SuperTokens bundles"
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUIEmailVerification.init({
      mode: "REQUIRED",
      disableDefaultUI: true,
    }),
  ],
});
```
</Tab>
</CodeGroup>

If you navigate to `/auth/verify-email`, you should not see the widget anymore.

### 2. Render the component yourself 

:::note[If you are using a **custom UI** implementation, then you can skip this step.]
:::

<DependentContent passive group="frontend-prebuilt-ui">
<ContentOption title="Reactjs" value="reactjs">
Add the `EmailVerification` component in your app:
</ContentOption>
<ContentOption title="Angular" value="angular">
:::warning[You have to build your own UI instead.]
:::
</ContentOption>
</DependentContent>

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import React from "react";
import { EmailVerification } from "supertokens-auth-react/recipe/emailverification/prebuiltui";

class EmailVerificationPage extends React.Component {
  render() {
    return (
      <div>
        <EmailVerification />
      </div>
    );
  }
}
```
</Tab>
<Tab title="Angular" value="angular">

</Tab>
</CodeGroup>


### 3. Change the website path for the email verification UI (optional)

The default path for this is component is `/{websiteBasePath}/verify-email`.

If you are displaying this at some custom path, then you need add additional configuration on the backend and frontend:

#### 3.1 Update the backend configuration

<CodeGroup group="backend-language">
<Tab title="Node.js" value="nodejs">
```tsx
import SuperTokens from "supertokens-node";
import EmailVerification from "supertokens-node/recipe/emailverification";

SuperTokens.init({
  supertokens: {
    connectionURI: "...",
  },
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    EmailVerification.init({
      mode: "OPTIONAL",
      emailDelivery: {
        override: (originalImplementation) => {
          return {
            ...originalImplementation,
            sendEmail(input) {
              return originalImplementation.sendEmail({
                ...input,
                emailVerifyLink: input.emailVerifyLink.replace(
                  // This is: `<YOUR_WEBSITE_DOMAIN>/auth/verify-email`
                  "http://localhost:3000/auth/verify-email",
                  "http://localhost:3000/your/path",
                ),
              });
            },
          };
        },
      },
    }),
  ],
});
```
</Tab>
<Tab title="Go" value="go">
```go
import (
	"strings"

	"github.com/supertokens/supertokens-golang/ingredients/emaildelivery"
	"github.com/supertokens/supertokens-golang/recipe/emailverification"
	"github.com/supertokens/supertokens-golang/recipe/emailverification/evmodels"
	"github.com/supertokens/supertokens-golang/supertokens"
)

func main() {
	supertokens.Init(supertokens.TypeInput{
		RecipeList: []supertokens.Recipe{
			emailverification.Init(evmodels.TypeInput{
				Mode: evmodels.ModeOptional,
				EmailDelivery: &emaildelivery.TypeInput{
					Override: func(originalImplementation emaildelivery.EmailDeliveryInterface) emaildelivery.EmailDeliveryInterface {
						ogSendEmail := *originalImplementation.SendEmail

						(*originalImplementation.SendEmail) = func(input emaildelivery.EmailType, userContext supertokens.UserContext) error {
							// This is: `<YOUR_WEBSITE_DOMAIN>/auth/verify-email`
							input.EmailVerification.EmailVerifyLink = strings.Replace(
								input.EmailVerification.EmailVerifyLink,
								"http://localhost:3000/auth/verify-email",
								"http://localhost:3000/your/path", 1,
							)
							return ogSendEmail(input, userContext)
						}
						return originalImplementation
					},
				},
			}),
		},
	})
}
```
</Tab>
<Tab title="Python" value="python">
```python check=false reason="initialization excerpt omits deployment connection config"
from supertokens_python import init, InputAppInfo
from supertokens_python.recipe import emailverification
from supertokens_python.ingredients.emaildelivery.types import EmailDeliveryConfig
from supertokens_python.recipe.emailverification.types import EmailDeliveryOverrideInput, EmailTemplateVars
from typing import Dict, Any


def custom_email_delivery(original_implementation: EmailDeliveryOverrideInput) -> EmailDeliveryOverrideInput:
    original_send_email = original_implementation.send_email

    async def send_email(template_vars: EmailTemplateVars, user_context: Dict[str, Any]) -> None:

        # This is: `<YOUR_WEBSITE_DOMAIN>/auth/verify-email`
        template_vars.email_verify_link = template_vars.email_verify_link.replace(
            "http://localhost:3000/auth/verify-email", "http://localhost:3000/your/path")

        return await original_send_email(template_vars, user_context)

    original_implementation.send_email = send_email
    return original_implementation


init(
    app_info=InputAppInfo(
        api_domain="...", app_name="...", website_domain="..."),
    framework='...',  
    recipe_list=[
        emailverification.init(
            mode="OPTIONAL",
            email_delivery=EmailDeliveryConfig(override=custom_email_delivery))
    ]
)
```
</Tab>
</CodeGroup>

#### 3.2 Update the frontend configuration

:::note[If you are using a **custom UI** implementation, then you can skip this step.]
:::

<CodeGroup group="frontend-prebuilt-ui">
<Tab title="Reactjs" value="reactjs">
```tsx
import SuperTokens from "supertokens-auth-react";
import EmailVerification from "supertokens-auth-react/recipe/emailverification";

SuperTokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    EmailVerification.init({
      mode: "REQUIRED",

      // The user will be taken to the custom path when they need to get their email verified.
      getRedirectionURL: async (context) => {
        if (context.action === "VERIFY_EMAIL") {
          return "/custom-email-verification-path";
        }
      },
    }),
  ],
});
```
</Tab>
<Tab title="Angular" value="angular">
```tsx check=false reason="script-tag example relies on globals provided by loaded SuperTokens bundles"
// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  recipeList: [
    supertokensUIEmailVerification.init({
      mode: "REQUIRED",

      // The user will be taken to the custom path when they need to get their email verified.
      getRedirectionURL: async (context) => {
        if (context.action === "VERIFY_EMAIL") {
          return "/custom-email-verification-path";
        }
      },
    }),
  ],
});
```
</Tab>
</CodeGroup>