diff --git a/docs/overview/access-requests-and-approvals.mdx b/docs/overview/access-requests-and-approvals.mdx
new file mode 100644
index 00000000..c08ad9cb
--- /dev/null
+++ b/docs/overview/access-requests-and-approvals.mdx
@@ -0,0 +1,136 @@
+---
+sidebar_position: 9
+title: Access Requests & Approvals
+---
+
+In this tutorial, you will learn how to integrate an access request and approval system into your app using Permit.io. We’ll
+cover how users can **[request access](/embeddable-uis/element/access-request)** to specific areas of your
+application, while admins **review, [approve](/embeddable-uis/element/operation-approval) or deny** those requests effortlessly.
+
+
+
+---
+
+import TimelineStep from "../../src/components/timeline/TimelineStep";
+import TimelineWrapper from "../../src/components/timeline/TimelineWrapper";
+import Video from "../../src/components/video/Video";
+
+## What are Permit Elements?
+
+In this tutorial, we’ll explore **[Permit Elements](/embeddable-uis/overview)** — secure, embeddable UI
+components that revolutionize access management for modern applications. These components empower your users to handle **[access
+requests](/embeddable-uis/element/access-request)** and approvals directly within your app, delivering a
+seamless and user-friendly experience without compromising on security.
+
+With Permit Elements, you can effortlessly integrate permission management into your app, enabling you to streamline workflows
+and maintain robust control over access policies.
+
+### A demo of Permit Elements
+
+
+
+
+
+
+
+
+---
+
+
+
+
+
+
+
+## Configuring your JWKS
+
+In this section, we’ll explore **[JSON Web Key Sets](/embeddable-uis/embedding-elements#configuring-jwks-for-your-environment)** (JWKS) —
+a critical component for ensuring the integrity of your JSON Web Tokens (JWTs). JWKS is essentially a collection of public keys
+that your application uses to validate incoming tokens, confirming they are legitimate and originate from a trusted source.
+
+By configuring JWKS in your app, you enable it to automatically fetch the public keys needed for secure token verification.
+This adds an **essential layer of security** to your authentication process, ensuring that only properly authenticated users can
+access your resources.
+
+
+
+
+
+
+
+
+## Setting up Permit and Elements
+
+Now that you’re familiar with the basics, it’s time to dive into integrating Permit into your app. In this section, we’ll
+guide you through the essential steps, including installing dependencies, setting up the **[Policy Decision Point](/overview/glossary/#pdp)** (PDP), and
+configuring your app for a seamless integration. By the end, you’ll have a **fully operational access control system**, ready to
+manage permissions efficiently and securely.
+
+
+
+
+
+
+
+
+## Building the Authorization Policy
+
+This is where the real magic of **authorization** happens—deciding exactly what your users can do within your app. In this
+section, we’ll guide you through **creating resources, defining roles, and specifying actions** users can take on those resources.
+Once everything is set up, you’ll **assign these roles and permissions** to your users, ensuring everyone has the right level of
+access for their needs.
+
+
+
+
+
+
+
+
+## Configuring Elements
+
+In this section, we’ll explore how to customize **[Permit Elements](/embeddable-uis/overview)** to fit
+perfectly within your app’s design and workflows. Permit Elements are built with flexibility in mind, allowing you to tweak
+both their behavior and appearance to match your app’s unique style.
+
+We’ll walk through the key customization options step by step—covering how to adjust workflows, modify visual elements, and
+ensure everything blends seamlessly with your app’s user interface. By the end, you’ll have a polished, secure, and fully
+integrated solution that enhances both functionality and design.
+
+
+
+
+
+
+## Embedding the Elements in our App
+
+In this section, we’re diving into the technical side by **embedding the Permit Elements** directly into your app. First, we’ll take
+the generated **[iframe](/embeddable-uis/element/access-request#creating-an-iframe)** snippet and
+seamlessly integrate it into your app’s codebase.
+
+Next, we’ll cover how to log users into the element, ensuring everything works together smoothly.
+
+
+
+
+
+
+With these steps completed, you’ve successfully **installed the dependencies**, set up the **Policy Decision Point** (PDP),
+and **configured [Permit](https://app.permit.io) for your app**.
+
+You’re now ready to embed Permit Elements, giving your users the ability to handle access
+requests and approvals seamlessly. With everything in place, your app is equipped for **secure, efficient access management**.
+
+## What did you learn?
+
+You should have learned how to:
+
+- Integrate **access requests and approvals** into your app with **Permit Elements**.
+- Configure key components like **JWKS** and the **Policy Decision Point** for secure workflows.
+- **Customize** and **embed Permit Elements** to match your app’s design and functionality.
+
+:::tip FUN FACT
+The concept of access requests and approvals dates back to ancient Egypt! In the time of the pharaohs, scribes used clay seals
+as "approvals" to access royal documents or treasure rooms. These seals acted as both a request and an authorization tool, much
+like modern-day digital workflows.
+:::
diff --git a/sidebars.js b/sidebars.js
index 07de8705..073ee77b 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -92,6 +92,7 @@ const sidebars = {
// "overview/setup-relationship-based-access-control",
// "overview/sync-application-data-into-permit",
// "overview/perform-a-local-policy-check",
+ "overview/access-requests-and-approvals",
{
type: "category",
label: "Manage Your Account",
@@ -126,7 +127,12 @@ const sidebars = {
type: "doc",
id: "overview/best-practices",
},
- items: ["how-to/ownership", "overview/how-does-it-work", "concepts/multitenancy", "how-to/build-policies/abac/time-based-role"],
+ items: [
+ "how-to/ownership",
+ "overview/how-does-it-work",
+ "concepts/multitenancy",
+ "how-to/build-policies/abac/time-based-role",
+ ],
},
],
},
@@ -366,13 +372,10 @@ const sidebars = {
],
},
{
- type: "category",
- label: "Policy Guard",
- items: [
- "how-to/policy-guard/policy_guard",
- "how-to/policy-guard/policy_guard_api",
- ],
- }
+ type: "category",
+ label: "Policy Guard",
+ items: ["how-to/policy-guard/policy_guard", "how-to/policy-guard/policy_guard_api"],
+ },
],
},
{
diff --git a/src/components/video/Video.js b/src/components/video/Video.js
index f9bd4c0f..e8a85382 100644
--- a/src/components/video/Video.js
+++ b/src/components/video/Video.js
@@ -5,9 +5,37 @@ const VideoPlayer = ({
autoPlay = true,
loop = true,
controls = true,
- className = "w-full h-auto block",
+ className = "w-full h-full block",
...props
}) => {
+ const isYouTubeLink = (url) => {
+ try {
+ const parsedUrl = new URL(url);
+ return parsedUrl.hostname.includes("youtube.com") || parsedUrl.hostname.includes("youtu.be");
+ } catch (e) {
+ return false;
+ }
+ };
+
+ if (isYouTubeLink(src)) {
+ const embedUrl = src.includes("youtube.com")
+ ? src.replace("watch?v=", "embed/")
+ : src.replace("youtu.be/", "youtube.com/embed/");
+
+ return (
+