Brand PDF reader with your colors (Experimental feature)

Sophie

June 11, 2021 20:12

Experimental feature

The following procedure is an experimental feature, pending further integration into ARGO editor.

This tutorial will teach you how to:

Customize main colors of the online PDF reader
Customize the reader favicon in your web browser
Add a custom loading screen with your colors

Nota Bene :

You can customize your reader with the webview assets within ARGO editor, available with the "Advanced" plan (Contact an account manager to learn more about Advanced plan).

These so-called "control" assets are interpreted when the Smartlink opens in a browser and are not present in the final display. They simply send instructions to the PDF reader when it opens in order to customize its interface, as shown in the examples below.

You need to set up 2 Webview assets to customize the reader.
They have the following names:

loadingAnimation : allows you to set the loading screen of your smartlink when it opens in a browser. The loading screen is displayed until document is loaded.

Chrome : allows you to customize the colors of the reader and the favicon once your smartlink is opened in a browser

Webview asset: loadingAnimation

1 - Open ARGO editor with the Smartlink of your choice. Remain on 1st page

2 - Select the Html asset and drag it in a blind spot over your document (the asset will be invisible in the final display)

3 - fill the title of the Html asset with name loadingAnimation

Warning: Do not modify the title of this asset in your editor, otherwise it will not be executed. You must leave the title as is, with the same case.

4 - Remove the default cover icon from the Html asset so that it is not visible in the final display
Click on the "cross" icon next to "Add" in the Cover Icon field.
The default image is then replaced by a transparent layer: your asset is no longer visible when you visualize your smartlink in a browser.
5- Open the Html asset editing window by clicking on the "Edit HTML" field
You will now be able to customize the optimized template for our document presentation.
Copy / paste the code below (replace red fields with your own content)

N.B : click on the red links to get information (size, format...)

<div id="loaderZ" style="background-color: #dedede">
<div class="loaderLogoZ" style="background:url(https://api.bear2b.com/media/189384290360426d0b46fe19.73176292.png) center center no-repeat"></div>
<div id="loadingContentZ" style="border-top-color: #9be5f9"></div>
</div>
<style>
html[dir=ltr] body #loaderZ {
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
background: url(https://api.bear2b.com/media/15435861956042840e7e7584.79462633.jpg) ;
display: block;
transition: opacity 0.5s ease-out; }

html[dir=ltr] body .loaderLogoZ {
position: fixed;
z-index: 1000000000000000000000;
top: 50%;
left: 50%;
margin-top: -55px;
margin-left: -55px;
width: 150px;
height: 150px;
background: transparent; }

html[dir=ltr] body #loadingContentZ {
border: 20px solid #fff;
border-top: 20px solid #000B37;
border-radius: 50%;
width: 150px;
height: 150px;
animation: spin 2s linear infinite;
position: fixed;
left: 50%;
top: 50%;
margin-top: -75px;
margin-left: -75px }

@keyframes spin {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) } }
</style>

Save your Smartlink edition and open it in your browser. If you have correctly set up the code above, you have customized the loading screen of your document: congratulations!

Webview asset: chrome

1 - Select a new Html asset and drag it in editor next to your document, still on page 1 (the asset will also be invisible in the final display)

2 - Fill the title of the Html asset with name chrome

Warning: Don't modify the title of this asset in editor, otherwise it won't be executed. You must leave the title as is, with the same case.

3 - Remove the default cover icon from the Html asset so that it is not visible in the reader.
Click on the "cross" icon next to "Add" in the Cover Icon field.
The default image is then replaced by a transparent layer: your asset is no longer visible.

4 - Open the editing window of the Html asset
Copy / paste the code below in your Html asset and customize your template as you just did for the loadingAnimation asset (replace the red fields by your own content).

N.B : click on the red links to get information (size, format...)

/* also:
PDFZ.api.setFont(
"Open Sans Light",
"https://fonts.googleapis.com/css?family=Open+Sans:300"
);
*/
PDFZ.api.setFont("Open Sans Light", {
src: "https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff",
format: "woff",
style: "normal",
weight: 300
});

PDFZ.api.setFavicon({
href:"https://www.google.com/s2/favicons?domain=https://ar-go.co/",
type:"image/png"
});

var primaryColor = "#000B37";
var bodyColor = "#9be5f9";

PDFZ.api.setColors({
sidebarBackground: "white",
selectedThumbnail:"#000B37",
background:"#9be5f9",
toolbar:{
fill:primaryColor,
text:"#F2F2F2"
},
toolbarInput:{
background:bodyColor,
text:primaryColor
},
toolbarToggle:{
checked:"#55bcd4",
unchecked:"#066b50",
handle:"#f2f2f2"
},
progress:{
fill:"#dddddd",
background:"#9be5f9" // darker primaryColor
}
});

</script>

Once these two assets have been added and set up on your document first page, save your Smartlink edition.
Go back to the ARGOflow manager and open your Smartlink in browser.
If you have successfully set up the fields of these two Html templates, you should see a custom loading screen when you open the Smartlink and visualize your colors in the PDF reader.

CONGRATULATIONS, you have customized your own PDF reader!

You can now copy/paste these two assets on the first page of all your smartlinks to apply this template to all your documents.
You can also customize these templates differently on each of your smartlinks according to your needs.

Enjoy ARGOflow solution

Brand PDF reader with your colors (Experimental feature)

Comments

Articles in this section