> For the complete documentation index, see [llms.txt](https://docs.self.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.self.xyz/self-pass-legacy/use-deeplinking.md).

# Use Deeplinking

Deep links allow users to open the Self mobile app directly instead of scanning QR codes. This provides a better mobile experience by eliminating the need to scan codes on the same device.

## When to Use Deep Links

* **Mobile web applications**: Users can tap a button to open Self app
* **Same-device verification**: Avoid QR code scanning on mobile
* **Messaging platforms**: Share verification links via SMS, email, or chat
* **Native mobile apps**: Direct integration with mobile applications

## Basic Usage

Generate a deep link from your SelfApp configuration:

```javascript
import { getUniversalLink } from '@selfxyz/core';
import { SelfAppBuilder } from '@selfxyz/qrcode';

// Create your SelfApp (same as for QR codes)
const selfApp = new SelfAppBuilder({
  // ... your configuration
}).build();

// Generate the deep link
const deeplink = getUniversalLink(selfApp);

// Use the deep link
window.open(deeplink, '_blank'); // Opens Self app
```

## Returning User to App Automatically

After the user's proof is verified, the Self app can automatically redirect them back to your app. Add the `deeplinkCallback` parameter with your app's deep link:

```javascript
const selfApp = new SelfAppBuilder({
  // ... your configuration
  deeplinkCallback: 'your-app-deeplink-url',
}).build();
```

The Self app will show: **"Redirecting to \[your-callback-url] in 5...4...3...2...1"** and automatically open your callback URL at the end of the countdown.

## Implementation Examples

### Simple Button

```javascript
function OpenSelfButton() {
  const handleOpenSelf = () => {
    const deeplink = getUniversalLink(selfApp);
    window.open(deeplink, '_blank');
  };

  return (
    <button onClick={handleOpenSelf}>
      Open Self App
    </button>
  );
}
```

### Mobile-First Experience

```javascript
function VerificationOptions() {
  const [deeplink, setDeeplink] = useState('');
  
  useEffect(() => {
    if (selfApp) {
      setDeeplink(getUniversalLink(selfApp));
    }
  }, [selfApp]);

  return (
    <div>
      {/* Show deep link button on mobile */}
      <div className="md:hidden">
        <button onClick={() => window.open(deeplink, '_blank')}>
          Open Self App
        </button>
      </div>
      
      {/* Show QR code on desktop */}
      <div className="hidden md:block">
        <SelfQRcodeWrapper selfApp={selfApp} />
      </div>
    </div>
  );
}
```

## Platform Considerations

### Mobile Browsers

* **iOS Safari**: Deep links work reliably
* **Android Chrome**: Deep links work reliably
* **In-app browsers**: May have limitations

### Desktop Browsers

* Deep links will attempt to open the mobile app
* If app not installed, may show app store page
* Generally better to show QR codes on desktop

## Best Practices

* **Provide both options**: Offer both QR codes and deep links
* **Mobile-first**: Prioritize deep links on mobile devices
* **Clear labeling**: Make it obvious what the button does
* **Testing**: Test on various mobile browsers and devices


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.self.xyz/self-pass-legacy/use-deeplinking.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.