How to Add Smart Previews to Your Results Page

Use the following instructions to configure SmartHub to use the Smart Previews component.

  1. Navigate to and open your custom settings .js file for the Results HTML page or create one as instructed on How to Customize Your SmartHub User Interface.
    1. For example: "CustomResultsSettings.js"
    2. New custom results settings files can be based off of the template file ResultsCopyCustomSettings.js, found at <SmartHub_root_folder>/CustomerCustomization/settings/ResultsCopyCustomSettings.js.
    3. Ensure your Results HTML page references your custom settings .js file.
  2. Navigate to the path <SmartHub_root_folder>/modules/SmartHubResourceLoader.
  3. Open the file DefaultModuleSettings.js, which contains all SmartHub Smart Previews settings around line 270. See below.


  4. Copy only the settings you want to change from the section SH.SmartPreviews.DefaultSettings.
  5. Go back to your custom Results settings file (DO NOT change any of the default settings, they are overwritten on upgrade) 
  6. Paste the copied settings inside the section SH.SmartPreviews.CustomSettings and change them accordingly:

    1. Enabled

      • Set to "true" to enable Smart Previews functionality.
    2. Address
      • Replace this value with the Smart Previews Web Resources site URL address.
    3. ExtenstionProperty
      • The property name that contains the file extensions.
    4. PreviewTriggers
      • The selector of the button that will display the preview when clicking on it.
    5. SupportedExtensions
      • Contains the file extensions for which Previews are generated.
    6. Options

        1. OpenSearchPanelByDefault

          • Set totrue to open the search inside panel, by default, when opening the document viewer.

        2. OpenBookmarksPanelByDefault

          • Set totrue to open the bookmarks panel, by default, when opening the document viewer.

          Limitation: You cannot have both OpenSearchPanelByDefault and OpenBookmarksPanelByDefault set to true at the same time.

        3. KeepStopWords

          • Set to true to highlight the stopwords in the document viewer.

        4. ShowDescriptiveText

          • Set to true to display a descriptive text to help users understand what they see in the document viewer.

        5. WidgetsToLoadForCustomViewer

          • Specify what widgets to load when the preview is displayed in a custom viewer:

            • htmlPreview (Required): Displays the preview content.

            • docNav (Required): Displays the navigation bar for pagination.

            • zoomControl (Optional): Displays the zoom control.

            • searchToolbar (Optional): Displays the button that shows/hides the "Search inside" panel.

            • If the OpenSearchPanelByDefault setting is set to true, the searchToolbar widget becomes required.

            • docActions (Optional): Displays the preview actions button.

            • bookmarksToolbar (Optional): Displays the button that shows/hides the bookmarks panel.

        6. UITimeoutSeconds

          • The number of seconds after which the TimeoutWarningMessage is displayed.
          • If you do not want to display a message, set to -1.

        7. TimeoutWarningMessage

          • The message that will be displayed when the online previews generation takes too long.
          • Default value is "Generating preview for this document is taking longer than %time% seconds. Please check back in a few minutes." 

          • %time% This is replaced with the actual number specified in the UITimeoutSeconds setting.

            Limitation:UITimeoutSeconds and TimeoutWarningMessage settings work only with Smart Previews v3.3 or newer versions.

        8. Thumbnails

        9. ContentBySearchSelectors

          • Contains a comma separated list of ContentBySearch selectors.

          • If it is left blank, the preview buttons are not displayed for any of the ContentBySearch elements.

          • For example: ".CoveoContentBySearch" or "#InterestsCBS,#MyDepartmentCBS".

Custom Settings Example:


Important

When upgrading any SmartHub earlier than SmartHub-5.3.1.0-c18385 you must delete the below Smart Previews element from your HTML pages:
Copy
<div class="CoveoSmartPreviews" data-extension-property="FileExtension" data-supported-extensions="rtf,doc,docx,docm,dot,dotm,dotx,ppt,pptx,pptm,pps,ppsm,pdf,xls,xlsx,xlsm,xlsb,xltm,xltx,xlam,txt,odt,url,csv,zip,eml,msg,exch,gif,jpg,bmp,png,tiff,dib,jpeg,rle,wmf,ico,wpd,odg" data-smart-previews-address="https://smartpreviewswebresourcesurl" data-open-search-panel-by-default="false" data-keep-stopwords="false" data-show-descriptive-text="false"></div>