Quickstart Guide: DeepLink Component
DeepLink Component
Get started
Using Ionic or Cordova? Get the DeepLink component working in your app in four easy steps.
- Download the component
- Add it to your environment
- Using DeepLink
- Troubleshoot
1. Download the Onymos DeepLink component
Sign up! We’ll send you a link to your component, set up your Onymos Cloud Account, and generate your Onymos license credentials. In the meantime, you can get familiar with our API Documentation and developer resources, or join a whole community of developers building apps with Onymos on Reddit!
2. Add it to your environment
Add your components to a folder in your app’s root (e.g., onymos_components).
Add the Onymos Initialize component to your environment.
$ ionic cordova plugin add onymos_components/onymos-component-initialize
Then we can add the Onymos DeepLink component.
$ ionic cordova plugin add onymos_components/onymos-component-deeplink
Then update the widget inside your config.xml with the Onymos Widget ID you receive after you create an Onymos Cloud Account.
3. Using DeepLink
Add the Onymos DeepLink component to your app and start sending your users right where you want them. Don’t worry, if they’re not a user already, they will be. We’ll route them straight to your app on the appropriate app store if they don’t already have it installed.
Before we use DeepLink, let’s make sure we have everything we need to configure your onymosConnectObject. The onymosConnectObject requires the appropriate Onymos license credentials: your Customer ID (also called an Onymos ID) and your Onymos Auth Token. You’ll need these credentials to use this (or any) component in your app.
Next, let’s go inside your Ionic app’s app.component.ts file and initialize DeepLink.
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
declare var OnymosInitialize: any;
declare var OnymosDeepLink: any;
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor(
private platform: Platform
) {
this.initializeApp();
}
initializeApp(){
this.platform.ready().then(() => {
const OnymosConnectObject={
customerId : 'Your customerId goes here',
onymosAuthToken : 'Your onymosAuthToken goes here',
envType: 'PRD',
version: '2'
}
OnymosInitialize.initialize(
OnymosConnectObject,
function onymosInitializeSuccess(status){
console.log("Onymos initialized Successfully.", status)
},
function onymosInitializeFailure(error){
console.log("Onymos failed to initialize.", error)
})
})
}
}
Great! If we configured your onymosConnectObject correctly, onymosInitializeSuccess() should print its message to the console. Now we’re ready to use DeepLink.
Let’s make a createDeepLink() function in the app.component.ts file that will invoke the method of the same name, and create your app’s first deep link.
createDeepLink() {
OnymosDeepLink.createDeepLink(
{
page: 'Your page',
referrer: 'User ID'
},
function createDeepLinkSuccess(url) {
console.log(url);
},
function createDeepLinkError(error) {
console.log(error);
},
options);
}
The createDeepLink() method requires a page name and a referrer — an ID identifying the user who created the deep link. You can add a title, descriptionText, and an imageURL for your deep link inside the options object.
createDeepLink(){
OnymosDeepLink.createDeepLink(
{
page: 'home',
referrer: OnymosAccess.getAuth();
}
function createDeepLinkSuccess(url) {
console.log(url);
},
function createDeepLinkError(error) {
console.log(error);
},
{
title: 'Example',
descriptionText: 'This is some descriptive text!',
imageURL: './assets/example.png'
});
}
But what happens when a user clicks the link? For that, we have to include the onDeepLink() method inside the app.components.ts file. We’ll create an onDeepLink() function that invokes the method, just like before
onDeepLink() {
OnymosDeepLink.onDeepLink(
function onDeepLinkSuccess(payload) {
console.log(payload);
},
function onDeepLinkSuccess(error) {
console.log(error);
});
}
Now, use the payload to route the user where you want them to go. That’s all it takes!
4. Troubleshooting
How do I squash this bug? Is Ionic supposed to do that? Why is this iOS build failing?
Let’s figure it out—join the Onymos community on Reddit! More of a loner? You can email us directly at customersuccess@onymos.com.
Dig into our API documentation
Developer support
Got questions? Our support team is here to help.
Think differently about app development
Download our free white paper today to learn how Onymos Features can maximize the value of your developer resources — and shave days or weeks off your development timeline.