---
title: "Modal Deep Links — Free Framer component · Best of Framer"
description: "Free Framer component · by Riccardo Fala · Interactive. Modal Deep Links gives every project a shareable address: yoursite.com/#coastal-rebrand Open a project and the URL updates Share…"
canonical: "https://framer.elliotli.dev/component/modal-deep-links"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Modal Deep Links

# Modal Deep Links

Send a link to any case study

[View on Framer](https://framer.com/marketplace/components/modal-deep-links/?via=elliot-li)

![Modal Deep Links preview image 1](https://framer.elliotli.dev/og/component/modal-deep-links/d9d353374750055f/1600x1200.jpg)

## Summary

Modal Deep Links gives every project a shareable address: yoursite.com/#coastal-rebrand Open a project and the URL updates Share the link and its modal opens automatically Browser…

## Description

Case studies inside modals don’t normally have individual URLs. When someone asks to see a project, you can only send your homepage and tell them where to click.

Modal Deep Links gives every project a shareable address:

`yoursite.com/#coastal-rebrand`

-   Open a project and the URL updates
    
-   Share the link and its modal opens automatically
    
-   Browser Back and Forward stay synchronized
    
-   Escape and your existing close button are detected after closing
    

### Setup

Place one instance anywhere on the page.

For reliable CMS URLs:

1.  Add a text layer inside each project card
    
2.  Bind it to the CMS **Slug** field
    
3.  Name it `ProjectSlug`
    
4.  Set it to `1 × 1` and `0%` opacity
    
5.  Don’t enable **Hidden**
    

Your project card and modal interaction should already work normally. This component adds URL synchronization; it doesn’t create the modal.

### Controls

**Slug Layer** — Layer bound to your CMS Slug field.

**Title Layer** — Optional fallback for identifying projects by title.

**Close Text** — Exact text used by your modal’s close control.

**Closed URL** — Hash displayed after closing. Defaults to `#projects`.

**Ignore** — Titles or slugs that shouldn’t receive links, such as Coming Soon cards.

### Automatic fallback

Without a slug layer, the component attempts to identify large linked image cards and creates URLs from their headings. A CMS slug layer is recommended because its URLs remain stable when titles change.

### Good to know

-   Shows only a small marker on the Framer Canvas
    
-   Renders no visible interface on the published site
    
-   Works with existing Framer overlays and modal interactions
    
-   Designed for one-page portfolios with modal case studies
    
-   Dedicated CMS pages are recommended when per-project SEO matters
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #6615

## Details

- **Author**: Riccardo Fala
- **Published**: 2026-08-13
- **Updated**: 2026-11-06
- **Added**: 2026-08-13
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase