Using Hints with Veeva Web2PDF

We understand that dynamic and interactive elements can make up a large portion of your website and that failing to capture these elements risks leaving out important content. Dynamic elements are any aspects of a webpage that may not be displayed immediately as the page loads, such as an image slider. These elements are usually JavaScript-based and may require user interaction. We developed a custom set of data attributes, called hints, that web developers can embed into their web pages to give Veeva Web2PDF the instructions it needs to accurately capture your dynamic elements.

Types of Hints

Veeva Web2PDF supports three (3) types of hints: events, site entry hints, and page hints.

Event Hints

Hints for elements that capture interactions. For example, add a hover hint on an element that shows a menu when the element is hovered over. The PDF will include a page that contains the menu. Event hints include:

• Click - An element that needs to be clicked on. For example, a button that shows more text.
• Hover - An element that needs to be hovered over. For example, a navigation menu that opens on hover.
• Fill - A text field that can be filled. For example, a search bar.
• Wait - A general delay you would like applied. For example, a delay to let a thumbnail on the page load.
• Remove - An element you would like to be removed. Note that this hint might cause some unexpected changes on the page.
• FillSubmit - A button or similar element that specifically submits a form or other text field. We recommend adding the confirmation page to your sitemap when using fillSubmit.

Because Veeva Web2PDF crawls links, we recommend using logout buttons instead of logout links on web pages where hints are added to a member login. Using links may cause Veeva Web2PDF to log out unexpectedly and may result in an inaccurate number of pages in the PDF.

Site Entry Hints

Hints for elements where an action needs to be taken in order to gain entry to your site. For example, if a modal needs to be closed before one can get to the main page of the site, add a site entry hint on the button that closes the modal.

You can also use site entry hints if your site redirects users to another URL to log in. If the username and password are required to continue, add a fill hint with the site entry toggle turned on (Chrome Extension) or with data-vv-siteEntry set to true (jQuery or HTML). Add a click hint with the site entry toggle turned on (Chrome extension) or with data-vv-siteEntry set to true (jQuery or HTML) to the login button or any other element that users must click for your site to redirect them to the landing page.

Page Hints

Hints that are applied to an entire web page, not a specific element on the web page. For example, setting a wait time for the page to load.

Hint Execution

Veeva Web2PDF executes hints in the following order:

1. Wait
2. Site Entry
3. ISI
4. Sequenced Hints
5. Non-Sequenced Hints

How to Add Hints

You can enter hints in three (3) ways:

• Hintify with the Web2PDF Chrome extension
• Create a jQuery file for your hints
• Add hints directly to your HTML file

Adding Hints with the Veeva Web2PDF Chrome Extension

You can browse your site and drop hints along the way with Hintify mode. Turn on Hintify mode, hover over an element on your site, and right click on it to add a hint. You can then generate a PDF directly from the Chrome extension with the click of a button. These hints are not permanent, and they are local to your computer. You can view and edit the hints you’ve added by navigating to the Hint tab from the Chrome extension. You can store up to 150 hints in your Chrome extension at once. You can also download your hints as a .js file to make them permanent via touchless hints, or you can download a JSON file to share hints with teammates.

Adding the Extension

You can add the Veeva Web2PDF Chrome extension to your browser from the Chrome web store.

“Hintify” your Website

To create the hint code for your website:

1. Navigate to your website in Chrome.
2. Click the Veeva icon to open the extension.
3. Click the Hintify button to activate the extension. When the extension is active, the Veeva icon changes.
4. Hover over a dynamic or interactive element in your website and right click on it to capture the interaction in your PDF.
5. Select an Event, or select Site Entry hint.
6. Fill in the fields, which may depend on the Event you selected, and click Save.
7. Repeat for other elements on your website.

Once you have captured all of your hints, click the Hint Tab button to go to the hint management system and preview your hints. Veeva Web2PDF opens a new tab and displays each hint you created in a card. From the Hint tab, you can edit, delete, or add descriptions to your hints. You can also download and upload hint files. Read more about the Hint tab below. Note that these hints are stored locally, so others won’t be able to see or use the hints you’ve added.

Navigate back to your web page and generate a PDF using the Chrome extension to see the results of the hints you’ve added. To make these hints permanent on your website, you can download your hints.js file by clicking the Download hint.js button in the extension and following the instructions below.

Using the Hints Management System

The Hints Management tab is divided into two parts. The URL Management Section displays all URLs with saved hints. The Hint Editing Section displays all hints configured for the selected URL.

Navigating the URL Management Section

You can use the search bar on top of the URL Management panel to find a URL. Click on a URL from the dropdown to see its corresponding hints in the Hint Editing section. Below the search bar, you’ll find a list of all URLs where you’ve added hints. Simply click on a URL to view all of its hints in the Hint Editing section. You can view hints for one URL at a time. Veeva Web2PDF groups all URLs that belong to the same domain into sections and provides a default name for the section header. To change the name of a section header, double click on it and click anywhere on the page to save. Click and drag on the right edge of the URL management component to resize.

Using the Hint Editing Component

The Hint Editing panel displays each hint for the selected URL in a hint box. The hint box displays the type of hint and the hint details. Hover over the selector icon to see the jQuery to select the element. Click the pencil or trash icons to edit or delete the individual hint.

Deleting Hints

You can delete hints one at a time using the trash icon on the hint cards. You can also delete all of the hints from a page by selecting the checkboxes on each section header or URL, clicking the menu button on the top right and then clicking delete.

Uploading and Downloading Hints

Chrome extension users can share hints with each other using JSON files. To share your hints with other Chrome extension users:

1. Select the pages you want to export hints for using the checkboxes in the URL Management component.
2. Click the menu button and click Download Hints.
3. Veeva Web2PDF will download a file called hint_tab_export.json to your computer. Send hint_tab_export.json to the people you would like to share your hints with.

To upload hints that have been shared with you:

1. Download the hint_tab_export.json file.
2. Navigate to your Hint tab.
3. Click the menu button on the top right and click Upload Hints.
4. Select the hint_tab_export.json file from your computer. Veeva Web2PDF will add the hints from the uploaded file.

If the file you are trying to upload contains hints for any pages that you have already have hints for in your Chrome extension, Veeva Web2PDF will ask you if you want to overwrite your existing hints. Select Overwrite Hints to delete your existing hints and replace them with the hints from the uploaded file. Select Keep Hints to save the existing hints and ignore the new hints in the file.

Please note that you must use a hint.js file downloaded from the extension if you would like to make your hints permanent. You cannot add a hint_tab_export.json file to your website server to make hints permanent.

Reasons to Add Hints with the Chrome Extension

• Fast, lightweight & simple
• Not permanent
• Can download hints to make them permanent
• No changes to your website’s code and no deployments to your website
• View, edit, search, and delete hints from a central location with the Hints Management System
• Can share hints with other Chrome extension users

Keep in Mind

• Local to your computer
• You can only make these permanent or shared by downloading a .js file.
• JQuery path is relative unless an ID is present.
• You can store up to 150 hints in the extension.
• Hints added through the Chrome Extension will overwrite any hints added through the sitemap.
• Hints added through the Chrome Extension will combine with any hints added directly to HTML files.

Adding Hints with jQuery

You can capture interactive content in your PDF using touchless hints. You can add hints to your site without modifying any of your website’s code by using jQuery. To add hints using jQuery, create a .js file and insert hints using page HINT attributes and the following format:

$('element').attr('attribute','value');

Note: You must add this .js file to your sitemap. More information can be found after the examples below.

Examples

To capture the standard before/after ISI snapshot with an ISI page hint:

$('html').attr('data-vv-isi','true');

To close a pop-up overlaying and blocking entry to a page :

$('#desktop_web2PDF .close_modal').attr('data-vv-action','click');
$('#desktop_web2PDF .close_modal').attr('data-vv-siteEntry','true');
// add the following line if you don’t want to see the pop-up in the PDF
$('#desktop_web2PDF .close_modal').attr('data-vv-snapshot','never');

To remove the ISI on a page after Veeva Web2PDF takes a desktop snapshot:

$('#isi-real').attr('data-vv-action','remove');
$('#isi-real').attr('data-vv-seq','1');
$('#isi-real').attr('data-vv-device','desktop');

To open a drop down menu that appears after hovering for 1 second:

$('#desktop_web2PDF .hover_menu').attr('data-vv-action','hover');
$('#desktop_web2PDF .hover_menu').attr('data-vv-snapshot','after');
$('#desktop_web2PDF .hover_menu').attr('data-vv-waitAfter','1000');

For an accordion with numerous sections, you can use a loop with hints to instruct Veeva Web2PDF to click and expand each section of the accordion:

var count = 1;
$('div .question').each(function() {
    $(this).attr('data-vv-seq', count);
    $(this).attr('data-vv-action','click');
    count++;
}
);

Making Hints Permanent with Touchless Hints

To add hints your site, create a hints section in your veevaweb2pdf.sitemap.json file. This is where you will reference the .js file(s) you wrote using jQuery or created using the Veeva Web2PDF Chrome extension.

Use the following format:

"hints" : {
    "page name": ["hint file 1", "hint file 2", etc.]
};

Note: You can use “all” as a page name to apply hints to all pages in your site.

Example:

"hints" : {
     "index.html": ["hints.isi.js"],
     "all": ["hints.js"]
};

Reasons to Add Hints with JQuery

• Permanent
• No changes to your website’s code
• Easy to update when you frequently change your website.
• Easily back out & modify hints

Keep in Mind

• Hints are completely separate from the element they are paired with.
• You must host the JQuery library on your website.
• You must deploy veevaweb2pdf.sitemap.json on your site (root/folder).
• Hints added through the sitemap will be overwritten by any hints added through the Chrome Extension.
• Hints added through the sitemap will combine with any hints added directly to HTML files.

Adding Hints Directly to HTML Files

You can capture your site’s dynamic elements by adding hints directly to your site’s HTML files. Place page HINT attributes in your <html> or <body> tag, and event and modifier HINT attributes in the HTML tag where you want the event to occur. For example, you would place the data-vv-isi="true" page hint in your <html> tag.

Example

For a carousel that contains three slides of content, the following custom data attributes provided by Veeva Web2PDF can be added to the carousel navigation to ensure all slides in the carousel are properly captured during the crawl.

<div href="#" class="jcarousel-control-prev">&lsaquo;</div>
<div data-vv-action="click" data-vv-count="2" data-vv-snapshot="before" href="#" class="jcarousel-control-next">&rsaquo;</div>

The hints above instruct the Veeva Web2PDF crawler to click on the carousel navigation button three times and take a snapshot before every click in addition to taking a snapshot upon page load.

Reasons to add Hints with HTML Tags

• Permanent
• Always visible throughout website code
• Useful for abstract concepts & controls
• Useful when selecting an element via JQuery path becomes difficult

Keep in Mind

• Depending on the structure of your website, it can be difficult to maintain and update hints.
• This method can be time consuming to implement on existing websites.
• This method requires changes to website code, and it may require an additional validation cycle after you make updates.
• Hints added directly to HTML files will combine with any hints added to the sitemap or through the Chrome Extension.

Page Hint Attributes

The following page hint attributes should be used on the <body> or <html> tags:

Name	Attribute	Possible Values	Description
Wait	data-vv-pageWait	Any integer value	Number of milliseconds to wait after the main page loads before taking snapshots. Default value is 0.
ISI	data-vv-isi	“true”	Set to “true” on a page that has a floating Important Safety Information (ISI). By default, when a page is defined to contain a floating ISI, Veeva Web2PDF would take two screenshots for that page. The first screenshot is the page with normal browser height (mimicking what end users would see when they first load the page). The second screenshot is the full page screen capture with the browser stretched to maximum height.

These page hint attributes should be used on the ISI message box and its controls.

Name	Attribute	Possible Values	Description
ISI Control	data-vv-isicontrol	“collapse”, “expand”, none	If the ISI message uses 2 separate buttons for collapsing and expanding, these tags can be applied to those buttons. If the ISI message uses a single button for collapsing and expanding, this tag can be applied to that button without a value. Veeva Web2PDF will take a snapshot with the ISI fully expanded and another snapshot with it collapsed. When used in conjunction with data-vv-isiframe, the second snapshot will have the ISI hidden, not just collapsed.
ISI Frame	data-vv-isiframe	none	This can be tagged on the container of the ISI message. When data-vv-isicontrol is used, adding this tag to an element will hide it when the ISI is collapsed. All subsequent snapshots will also have the ISI message hidden. Requires data-vv-isicontrol to be tagged to have an effect.

The following hint event attributes should be placed on the HTML tag where you want a specific action to occur. For example, “click” clicks the button before the next snapshot.

The following hint modifier attributes should be placed in the HTML tag to inform how and when a HINT event occurs. For example, “click” clicks a button 2 times before the next snapshot. Note that certain modifier attributes may only be available for certain Events.