In order to use the DS Server DocumentViewer with pure HTML and JavaScript, an additional step is required to retrieve the OAuth access token from DS Server. This sample shows how to retrieve the token and how to initialize the viewer on a simple HTML page.

In order to run this application, a DS Server trial token is required. If you don't have a token yet, you can get your token here for free:

Trial Token

This sample implements a DocumentViewer JavaScript class that requests the access token in order to initialize the viewer:

var DocumentServices = (function (tx) {
        
        var m_clientID,
                m_clientSecret,
                m_serviceURL,
                m_containerID,
                m_accessToken,
                m_userNames = [ "unknown user" ];
                m_isSelectionActivated = true;
                m_showThumbnailPane = true;

        tx.DocumentViewer = {

                setUserNames: function (userNames) {
                        m_userNames = userNames;
                },

                setIsSelectionActivated: function (activated) {
                        m_isSelectionActivated = activated;
                },

                setShowThumbnailPane: function (show) {
                        m_showThumbnailPane = show;
                },

                init: function (clientID, clientSecret, serviceURL, containerID) { 
                        m_clientID = clientID;
                        m_clientSecret = clientSecret;
                        m_serviceURL = serviceURL;
                        m_containerID = containerID;

                        var script = document.createElement('script');

                        script.onload = function () {
                                        
                                TXDocumentViewer.init( {
                                        containerID: m_containerID,
                                        viewerSettings: {
                                                toolbarDocked: true,
                                                dock: "Fill",
                                                userNames: m_userNames,
                                                isSelectionActivated: m_isSelectionActivated,
                                                showThumbnailPane: m_showThumbnailPane,
                                                basePath: m_serviceURL + "/documentviewer",
                                                oauthSettings: {
                                                        accessToken: m_accessToken
                                                }
                                        }
                                });
                                
                        };

                        getAccessToken(function(token) {
                                m_accessToken = token;
                                script.src = m_serviceURL + 
                                        "/documentviewer/textcontrol/GetResource?Resource=minimized.tx-viewer.min.js&access_token=" +
                                        m_accessToken;
                                document.head.appendChild(script);
                        });
                },

        }

        function getAccessToken(callback) {

                $.ajax({
                        type: "POST",
                        headers: {
                                "Authorization": "Basic " + btoa(m_clientID + ":" + m_clientSecret)
                        },
                        url: m_serviceURL + "/OAuth/Token",
                        data: {
                                "grant_type": "client_credentials"
                        },
                        success: successFunc
                });

                function successFunc(data, status) {
                        if (typeof callback == "function") {          
                                callback(data.access_token);
                        }
                }
        }

        return tx;

} ( DocumentServices || {} ));

This JavaScript file is then referenced in the sample HTML. Additionally, a host element (txViewer) is created and the init() method is called with your trial token credentials:

<html>
    <head>
        <!-- jQuery CDN -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" 
                integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
                crossorigin="anonymous">
        </script>

        <!-- DocumentServices JavaScript -->
        <script src="DocumentServices.DocumentViewer.js"></script>
    </head>
    <body>

        <!-- Host container for the document viewer -->
        <div id="txViewer" style="width: 800px; height: 500px;"></div>

        <script>
            var clientID = "";
            var clientSecret = "";
            var serviceURL = "https://trial.dsserver.io";

            // initialize DocumentViewer
            DocumentServices.DocumentViewer.setUserNames(["user1"]);
            DocumentServices.DocumentViewer.setShowThumbnailPane(true);
            DocumentServices.DocumentViewer.init(clientID, clientSecret, serviceURL, "txViewer");
        </script>
            

    </body>
</html>

The function getAccessToken is requesting an access token from the OAuth endpoints of DS Server by exchanging the ClientId and ClientSecret for a valid OAuth access token:

function getAccessToken(callback) {
        
  $.ajax({
    type: "POST",
    headers: {
      "Authorization": "Basic " + btoa(m_clientID + ":" + m_clientSecret)
    },
    url: m_serviceURL + "/OAuth/Token",
    data: {
      "grant_type": "client_credentials"
    },
    success: successFunc
  });

  function successFunc(data, status) {
    if (typeof callback == "function") {              
      callback(data.access_token);
    }
  }
}

The returned access token is then used to inject the required DocumentViewer JavaScript in order to call the init() method of DocumentViewer:

var script = document.createElement('script');
        
script.onload = function () {

  TXDocumentViewer.init( {
    containerID: m_containerID,
    viewerSettings: {
      toolbarDocked: true,
      dock: "Fill",
      userNames: m_userNames,
      isSelectionActivated: m_isSelectionActivated,
      showThumbnailPane: m_showThumbnailPane,
      basePath: m_serviceURL + "/documentviewer",
      oauthSettings: {
        accessToken: m_accessToken
      }
    }
  });

};

getAccessToken(function(token) {
  m_accessToken = token;
  script.src = m_serviceURL + 
    "/documentviewer/textcontrol/GetResource?Resource=minimized.tx-viewer.min.js&access_token=" +
    m_accessToken;
  document.head.appendChild(script);
});

This initializes the DocumentViewer on the HTML page. The loadDocument method of the JavaScript API can be used to load a document into the created DocumentViewer.

You can test this on your own by downloading the full sample from our GitHub repository.