Technical documentation of the PDF Viewer widget

Owned by Daniela Ludwig
Last updated: 17.09.2024
5 min read

Description

On this page you will find the technical description for integrating the PDF viewer. The PDF viewer can be used to view PDF documents. Within the PDF viewer, many additional functions such as a download button, a shopping cart, a search function, etc. can be used and added. Below you will find an overview of the content of this page:

Contents

Parameters “xs-pdf-viewer”

This widget opens the PDF document identified by the link ID.

Input

Input

Parameter

Mandatory

Description

Example value

linkID

Yes

External link ID of the upload to be opened in the viewer. The ID can be generated in the info package upload at the time of upload.

b8fd8f7c-d815-41a3-b36b-d7120821d1d1

download

No

Activates the download function of the PDF documents for this channel. If deactivated, the download button will not be displayed.

true

shopcart

No

Enables the shopping cart event that the embedding system can use to open the shopping cart overlay. If disabled, the shopping cart button will not be displayed in the PDF viewer.

true

shopsearch

No

Activates the search event that the embedding system can use for further searches. If deactivated, the search button for the shop will not be displayed..

true

externalsearch

No

 

true

donwloadinnewtab

No

If the parameter is set to true, a new tab will open when you click on the download button and the file will be downloaded

true

downloadinnewtabtarget

No

To be used in conjunction with “downloadinnewtab”. Only used if “downloadinnewtab” is set to true

Specifies the destination that the download URL should open

By default or if no value is set, “_blank” is used

{ ... "downloadinnewtabtarget": "_parent" }

 

style

No

JSON object to define the primary and secondary color of the widget. The object has two fields:

  • primarycolor: Primary color. A hexadecimal string is expected as the value (Example: "#616161").

  • secondarycolor: Secondary color. A hexadecimal string is expected as the value (Example: "#D3D3D3").

"style":{ "primarycolor": "#616161", "secondarycolor": "#D3D3D3" }

Ausgang

status

 

This event is always issued during initialization.

  • error

  • complete

  • found

 

shopsearch

 

This event is only output if this function has been activated for the corresponding channel.

The event contains the following two pieces of information.

  • searchterm

    • String / Can be empty

  • manufacturerid

    • String / Can be empty

  • callback

    • thumbnailurl: String, URL to the thumbnail of the document. When retrieving, the OAuth2 token must be included in the header of the request.

    • uploaddescription: String, Document upload description

    • widgetstate: String, Status of the widget for return. Must be passed to the widget in the parameters when returning to restore the status.

{ "searchterm":"test", "manufacturerid":"testid" "callback": { "searchterm":"test", "manufacturerid":"testid", "thumbnailurl": "https://2.0.open-datacheck.de/webservicehub/DateiabrufOMD?type=LO&fileID=c2l0ZXMvZGVmYXVsdC9maWxlcy9pbmZvcGFja2FnZS8yLzEzMDEvMTYzNTE3MjczMi90aHVtYm5haWxzLzEwMzE5MjY0LnBkZi5qcGVn" "uploaddescription": "Installation 2021" } }

shopcart

 

This event is only output if this function has been enabled for the corresponding channel.

  • thumbnailurl: String, URL to the thumbnail of the document. When retrieving, the OAuth2 token must be included in the request header.

  • uploaddescription: String, Document upload description

  • widgetstate: String, Status of the widget for return. Must be passed to the widget in the parameters when returning to restore the status.

shopcart

 

This event is output when you click on an external link in a PDF document.

Output of the value specified in the PDF document for the external link as a string

Example image

2ed9ba7c-14bb-41e2-8056-4e8737806c60.png

Example parameters

Example integration

Embed the following code snippet into the HTML DOM.

Example event “shopsearch”

The following code example waits for the return event “shopsearch” from DeepSearch.

Example event “shopcart”

The following code example waits for the return event “shopcart” from DeepSearch.

Example event “status”

The following code example waits for the return event “status” from DeepSearch.

Sample code (PHP)