Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codex-team/deeplinker
Use one link to open installed apps or web pages
https://github.com/codex-team/deeplinker
deep-link deeplinks electron-app frontend npm protocol scheme telegram yarn
Last synced: about 3 hours ago
JSON representation
Use one link to open installed apps or web pages
- Host: GitHub
- URL: https://github.com/codex-team/deeplinker
- Owner: codex-team
- License: mit
- Created: 2018-05-25T10:30:16.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-23T20:51:39.000Z (almost 2 years ago)
- Last Synced: 2024-04-24T01:02:14.130Z (7 months ago)
- Topics: deep-link, deeplinks, electron-app, frontend, npm, protocol, scheme, telegram, yarn
- Language: JavaScript
- Homepage:
- Size: 101 KB
- Stars: 58
- Watchers: 16
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Deeplinker
This module helps you to create web-links for opening native applications directly if it is possible. Otherwise web page will be opened.
## Install
You can install script via package managers or download it to your server.
### NPM and Yarn
Install package
```shell
npm install @codexteam/deeplinker --save
```
```shell
yarn add @codexteam/deeplinker
```
Then require `deeplinker` module
```js
const deeplinker = require('@codexteam/deeplinker');
```
### Local script
Download [dist/deeplinker.js](dist/deeplinker.js) file to your server and add it to your webpage.
```html
```
## Usage
Let's imagine that you want to create a link that opens some page in application, if it is installed. If target application is missing then link should open a web page as a normal link.
Check out example schemes below.
### On click
Firstly you need to add the following params to deeplinker elements:
- `data-link` or `href` with a usual link
- `data-app-link` with a deep link (with custom protocol) to an application
Set up `data-app-link` param for links with `href`.
```html
Follow us on Instagram
```
Or set up `data-link` and `data-app-link` params for any other elements
```html
Join our Telegram-channel
```
Then you need to add click listeners. There are two ways to do this.
#### Add listeners automatically
Add target class name to all deeplinker elements (`deeplinker` by default). Use `deeplinker.init()` function to add listeners automatically to all elements with target class name. `event.preventDefault` and `deeplinker.click` will be added as onclick function.
Run this function when page is loaded.
```html
```
```html
Join our Telegram-channel
```
##### Custom selector
You can call `deeplinker.init()` with string param to set up target selector. `.deeplinker` by default.
Example:
```js
deeplinker.init('.my_deeplinker_element');
```
for
```html
Join our Telegram-channel
```
#### Set up onclick functions by yourself
Call `deeplinker.click(element)` function on click.
Set up click function on deeplinker elements.
```html
Join our Telegram-channel
```
For link elements you also need to add `event.preventDefault` function:
```html
Follow us on Instagram
```
### Try to open app automatically
If you want to try to open app silently then call `deeplinker.tryToOpenApp(deepLink)`.
Could be useful for redirection or invitation pages.
> Doesn't work on mobile devices.
```html
```
## Schemes of popular apps
### Telegram
```
tg://resolve?domain=[username]
```
### Twitter
```
twitter://user?screen_name=[username]
```
### Instagram
```
instagram://user?username=[username]
```
### Facebook
```
fb://profile/[id]
```
### VK
```
vk://vk.com/[id]
```
## Issues and improvements
Feel free to ask a question or improve this project.
## License
MIT