Installing Apty Client - Injected Mode – Apty Support

By injecting code snippets into your hosting application, you can safely install Apty Client and provide users access to it the moment they open the application. As a result, users no longer need to install Apty Client as a separate browser extension on their system to view the content(such as Workflows, Validations, Launchers, Tooltips, and Announcements) on your application.

The injected mode of installation can be used when:

You own the hosting application (and its source code).
Bypass browser extension installation for each end user.
Avoid keeping track of Apty updates.

To install the Apty Client on your application using Injected mode,

1. Login to the Admin Portal.

2. Select the application into which you want to inject the Apty Client.

3. Click the Application Settings gear icon.

4. On the General Settings page, check the Inject Apty Client with code snippet box and then click Save.

Note:

Checking the Inject Apty Client with code snippet box will enable you to integrate Apty Client into your hosting application.

5. On the left panel click the settings icon.

6. Click Client Version.

7. Select the latest Injected Client Version from the dropdown and then click Upgrade.

Info:

Ensure to upgrade to the latest version to seamlessly use Injected Apty Client.

To learn more, see Apty Client Versions.

8. In the URL section, replace manage-users with injected-hook and then hit enter.

9. Inject the code snippet in the code editor.

Injecting the Code Snippet for SaaS users

Injecting the code snippet is a two step process.

Step 1: Modifying the code

Step 2: Injecting the modified code

Step 1: Modifying the code

The code lines that have red comments in the given code block has to be modified before injecting it in the Admin Portal.

// New Injected Script For Version Control to be updated in admin.
(async function () { 
 function getClientVersion(data) { 
 for (const app of data) { 
 for (const env of Object.keys(app.environments).map(Number).sort((a, b) => (a - b))) { 
 const environment = app.environments[env]; 
 const url = (environment && environment.url).replaceAll('*', '.*').replaceAll('..', '.'); 
 if ( 
 !!url && new RegExp(url).test( 
 window.top.location.href 
 ) 
 ) { 
 return environment.clientVersion; 
 } 
 } 
 } 
 } 
 const contentURL = "https://client.app.apty.io"; // change app to au/eu1/staging according to the region it was created in
 const serverUrl = "https://app.apty.io"; // change app to au/eu1/staging according to the region it was created in
 const tenantKey = "m64sZClY"; // change it with your tenant's tenant key
 const hostedJsUrl = contentURL; 
 let hostedJsPath = hostedJsUrl + '/production/client-injected-latest'; 
 const fontsUrl = "https://fonts.app.apty.io"; 
 const element = window.document.createElement("script"); 
 const segmentIoUrl = "https://api.segment.io"; 
 const storageURL = 'https://storage.app.apty.io'; // change app to au/eu1/staging according to the region it was created in 
 const eventsApiUrl = 'https://track.app.apty.io'; // change app to au/eu1/staging according to the region it was created in
 let baseTag = ""; 
 let clientVersion = ""; 
 const deploymentType = ''; 
 const timeStamp = new Date().getTime(); 
 const response = await fetch( 
 `${contentURL}/tenant-${tenantKey}/app-urls.json?timestamp=${timeStamp}` 
 ); 
 await response.json().then((data) => { 
 if (data.length > 0) { 
 clientVersion = getClientVersion(data); 
 if (!clientVersion) { 
 clientVersion = '4.16.0'; 
 } 
 element.setAttribute("id", "letznav-script"); 
 element.setAttribute("type", "text/javascript"); 
 element.setAttribute("data-server", serverUrl); 
 element.setAttribute("data-instanceid", tenantKey); 
 element.setAttribute("data-hosted-js", hostedJsUrl); 
 element.setAttribute("data-content-url", contentURL); 
 element.setAttribute("data-segmentIo-url", segmentIoUrl); 
 element.setAttribute('src', hostedJsPath + '/apty-client.js'); 
 element.setAttribute("data-fonts-url", fontsUrl); 
 element.setAttribute("data-base-tag", baseTag); 
 element.setAttribute('data-storage-url', storageURL); 
 element.setAttribute("data-client-version", clientVersion); 
 element.setAttribute('data-deployment-type', deploymentType); 
 element.setAttribute("data-events-api-url", eventsApiUrl) 
 window.document.head.appendChild(element); 
 } 
 }); 
})();

Considering the environment being used or the user's location, the following urls need to be modified.

Environment	Region	Existing URLs	Modified URLs
Staging	US, IN, AU, EU1	const contentURL = https://client.app.apty.io const serverUrl = "https://app.apty.io"; const storageURL = 'https://storage.app.apty.io'; const eventsApiUrl = 'https://track.app.apty.io';	const contentURL = https://client.staging.apty.io const serverUrl = "https://staging.apty.io"; const storageURL = 'https://storage.staging.apty.io'; const eventsApiUrl = 'https://track.staging.apty.io';
Production	US, IN	const contentURL = https://client.app.apty.io, const serverUrl = "https://app.apty.io"; const storageURL = 'https://storage.app.apty.io'; const eventsApiUrl = 'https://track.app.apty.io';	No change
	AU	const contentURL = https://client.app.apty.io; const serverUrl = "https://app.apty.io"; const storageURL = 'https://storage.app.apty.io'; const eventsApiUrl = 'https://track.app.apty.io';	const contentURL = https://client.au.apty.io; const serverUrl = "https://au.apty.io"; const storageURL = 'https://storage.au.apty.io'; const eventsApiUrl = 'https://track.au.apty.io';
	EU1	const contentURL = https://client.app.apty.io; const serverUrl = "https://app.apty.io"; const storageURL = 'https://storage.app.apty.io'; const eventsApiUrl = 'https://track.app.apty.io';	const contentURL = https://client.eu1.apty.io; const serverUrl = "https://eu1.apty.io"; const storageURL = 'https://storage.eu1.apty.io'; const eventsApiUrl = 'https://track.eu1.apty.io';

Note:

Ensure to replace the Tenant Key in the code snippet by fetching it from the Account Settings section in the Admin Portal. To learn more, see Access Account Details.
No change is to be made to the fonts url for any environment.

Step 2: Injecting the modified code

a. Once all the required modifications are done, insert the code block in the Injected Hook code editor in the Admin Portal.

Note:

If you are using Injected Mode for the first time, add the modified code in the code editor or replace the existing code with the modified code.

b. Click Save.

c. Insert the following code to your hosting application's header tag after modifying the code lines that have red comments.

(function() { 
 const contentURL = 'https://client.app.apty.io'; //check the url according to your tenant's environment or location 
 const element = window.document.createElement('script'); 
 const tenantKey = 'RnUBpDNQ'; //your tenant’s tenant key 
 const timeStamp = new Date().getTime(); 
 element.setAttribute('src', contentURL + `/tenant-${tenantKey}/injected-hook.js?timestamp=${timeStamp}&token=`); 
 window.document.head.appendChild(element); 
})();

Note:

Refer to the table in Step 1 to modify the url.

Injecting the Code Snippet for On-prem users

Injecting the code snippet is a two step process.

Step 1: Modifying the code

Step 2: Injecting the modified code

Step 1: Modifying the code

The code lines that have red comments in the given code block has to be modified before injecting it in the Admin Portal.

Note:

Ensure to replace "onprem-test.development.apty.io" with your domain.
The link can vary from one company to another. So, you just need to replace the path of the URL.

(async function () {
 function getClientVersion(data) {
for (const app of data) {
 for (const env of Object.keys(app.environments).map(Number).sort((a, b) => (a - b))) {
const environment = app.environments[env];
const url = (environment && environment.url).replaceAll('*', '.*').replaceAll('..', '.');
if ( 
new RegExp(url).test(
window.top.location.href
)
){
return environment.clientVersion;
}
}
}
}
const contentURL = https://onprem-test.development.apty.io/minio/download/apty-content;  // replace “onprem-test.development.apty.io” with the server URL
  const serverUrl = https://onprem-test.development.apty.io; // companies' server URL 
  const tenantKey = "9aVVkRaY"; // to be changed according to the tenant key 
  const hostedJsUrl = 'https://onprem-test.development.apty.io/minio/download/apty-assets/'; // replace “onprem-test.development.apty.io” with your hostedJsUrl
  const fontsUrl = https://onprem-test.development.apty.io/minio/download/fonts/; // replace “onprem-test.development.apty.io” with your fontsUrl 
   const element = window.document.createElement("script"); 
  const segmentIoUrl = https://onprem-test.development.apty.io/proxy/es; // replace “onprem-test.development.apty.io” with your segmentIoUrl 
  const storageURL = 'https://onprem-test.development.apty.io'; // replace “onprem-test.development.apty.io” with your storageURL 
  let baseTag = ""; 
  let clientVersion = ""; 
  const deploymentType = 'on-prem'; 
  const timeStamp = new Date().getTime(); 
  const IfrmIgnoreClasses = ''; 
  const response = await fetch( 
    `${contentURL}/tenant-${tenantKey}/app-urls.json?timestamp=${timeStamp}&token=` 
);
  await response.json().then((data) => { 
    if (data.length > 0) { 
      clientVersion = getClientVersion(data); 
      if (!clientVersion) { 
        clientVersion = '4.16.0'; 
}
      hostedJsPath = hostedJsUrl + `on-prem/client-injected-${clientVersion}`; 
      element.setAttribute("id", "letznav-script"); 
      element.setAttribute("type", "text/javascript"); 
      element.setAttribute("data-server", serverUrl); 
      element.setAttribute("data-instanceid", tenantKey); 
      element.setAttribute("data-hosted-js", hostedJsUrl); 
      element.setAttribute("data-content-url", contentURL); 
      element.setAttribute("data-segmentIo-url", segmentIoUrl); 
      element.setAttribute('src', hostedJsPath + '/apty-client.js?token='); 
      element.setAttribute("data-fonts-url", fontsUrl); 
      element.setAttribute("data-base-tag", baseTag); 
      element.setAttribute('data-storage-url', storageURL); 
      element.setAttribute("data-client-version", clientVersion); 
      element.setAttribute('data-deployment-type', deploymentType); 
      element.setAttribute('data-ifrm-ignore-classes', IfrmIgnoreClasses); 
      window.document.head.appendChild(element); 
}
});
})();

Step 2: Injecting the modified code

a. Once all the required modifications are done, insert the code block in the Injected Hook code editor in the Admin Portal.

Note:

If you are using Injected Mode for the first time, add the modified code in the code editor or replace the existing code with the modified code.

b. Click Save.

c. Insert the following code to your hosting application's header tag and then change all the URLs according to your contentURL Path.

(function() { 
const contentURL = "https://onprem-test.development.apty.io/minio/download/apty-content" // change this with your contentURL path 
const element = window.document.createElement('script'); 
const tenantKey = 'RnUBpDNQ'; // your tenant’s tenant key 
const timeStamp = new Date().getTime(); 
element.setAttribute('src', contentURL + `/tenant-${tenantKey}/injected-hook.js?timestamp=${timeStamp}&token=`); 
window.document.head.appendChild(element); 
})();

For more information, contact your Customer Success Manager.

Related articles