Working with Apty Client
      Back to home
      1. Customer Support Center
      2. Manage and Organize Apty Content
      3. Working with Apty Client

      Installing Apty Client - Injected Mode

      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.  Log in to the Admin Portal.

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

      3.  Click the Application Settings gear icon.
      select application

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

      inject app option

      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 system settings icon.

      6.  Click Client Version.

      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.

      injected hook

      9. The injected hook code will be accessible on this page, as shown in the GIF below. Please review the details and proceed by clicking Save.

      injected hook script

      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.