diff --git a/node_modules/oae-core/documentpreview/documentpreview.html b/node_modules/oae-core/documentpreview/documentpreview.html
index b1ecff82d05..db6aec4621a 100644
--- a/node_modules/oae-core/documentpreview/documentpreview.html
+++ b/node_modules/oae-core/documentpreview/documentpreview.html
@@ -40,7 +40,7 @@
 
 <!-- TEMPLATES -->
 <div id="documentpreview-content-page-template"><!--
-    <div class="documentpreview-content-page ${contentId}-${revisionId}-pdf2html" data-page-number="${pageNumber}">
+    <div class="documentpreview-content-page ${cssScopeClass}" data-page-number="${pageNumber}">
         <div class="documentpreview-content-page-loading text-center">
             <i class="icon-spinner icon-spin"><span class="oae-aural-text">__MSG__LOADING__</span></i>
         </div>
diff --git a/node_modules/oae-core/documentpreview/js/documentpreview.js b/node_modules/oae-core/documentpreview/js/documentpreview.js
index f47901e098c..a1a3570a723 100644
--- a/node_modules/oae-core/documentpreview/js/documentpreview.js
+++ b/node_modules/oae-core/documentpreview/js/documentpreview.js
@@ -89,9 +89,7 @@ define(['jquery', 'underscore', 'oae.core', 'lazyload'], function($, _, oae) {
 
             // Add the page container, containing a loading indicator
             $content.append(oae.api.util.template().render($('#documentpreview-content-page-template', $rootel), {
-                // Replace colons as they cause CSS selectors to be invalid
-                'contentId': widgetData.id.replace(/:/g, '-'),
-                'revisionId': widgetData.latestRevisionId.replace(/:/g, '-'),
+                'cssScopeClass': widgetData.previews.cssScopeClass,
                 'pageNumber': page.pageNumber
             }));