Hints
 
Using Hints with Veeva Web2PDF
We understand that dynamic and interactive elements can make up a large portion of your website. Failing to capture these elements would leave out chunks of 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 some user interaction. To accurately capture these elements, we developed a custom set of data attributes, called hints, that web developers can embed into their web pages, giving Veeva Web2PDF the instructions it needs to capture your dynamic elements.

You can enter hints in three (3) ways:

Each method of entering hints has its own pros and cons:

Chrome Extension Touchless (JQuery) Tags (HTML)
Reasons to Use
  • Fast, lightweight & simple
  • Preview hints easily
  • Not permanent
  • Can download hints to make them permanent
  • No changes to your website's code, and no deployments to your website
Reasons to Use
  • Permanent
  • No changes to your website's code
  • Easy to update when you frequently change your website.
  • Easily back out & modify hints
Reasons to Use
  • Permanent
  • Always visible throughout website code
  • Useful for abstract concepts & controls
  • Useful when selecting an element via JQuery path becomes difficult
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.
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 VeevaWeb2PDFSitemap.json on your site (root/folder).
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.
Types of Hints
Veeva Web2PDF supports three (3) types of hints: page hints, events, and modifiers. Page HINT attributes are at the page-level. Event hint attributes are at the control- or action- level.

Three wireframes show the three types of hints

Veeva Web2PDF executes hints in the following order:

  1. Wait
  2. ISI
  3. Pre-Sequence (Executed before Veeva Web2PDF takes a snapshot)
  4. Sequence (Executed after Veeva Web2PDF takes a snapshot)
  5. Non-Sequence


A diagram shows the order of hint execution

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.
The following hint event attributes should be placed on the HTML tag where you want a specific action to occur (e.g. "click" clicks the button before the next snapshot).

Name Attribute Possible Values Description
Action data-vv-action "click", "hover",
"remove", "fill",
"fillSubmit", "wait"
Type of action performed before next snapshot. See example below.
The following hint modifier attributes should be placed in the HTML tag to inform how and when a HINT event occurs (e.g. "click" clicks a button 2 times before the next snapshot). Note that certain modifier attributes may only be available for certain Events.

Name Attribute Possible Values Description Events
Count data-vv-count Any Integer value Number of times Veeva Web2PDF should click (data-vv-action="click") on an element before it generates your PDF.

Default is set to 1.

This is commonly used on design patterns such as a carousel with a set of slides or rotating images.

See example below.
Click
Wait Time data-vv-waitAfter Any Integer value Number of milliseconds to wait after the action to take a snapshot. Default value is 1000, for 1000 milliseconds. Click, Hover, Wait
Fill Value data-vv-fillValue <username>,<password>, custom text Veeva Web2PDF uses the text you enter in this modifier to fill the selected field. You can use this modifier for form-based authentication or just filling text.

For authentication, Veeva Web2PDF recognizes "<username>" and "<password>" as tokens to retrieve the credentials entered on the main page's form. Otherwise, Veeva Web2PDF uses general text to fill the field.

Note that you must create a separate, FillSubmit event hint on a button or element for Veeva Web2PDF to submit a form.
Fill
Sequence data-vv-seq Any Integer value Sequence order in which Veeva Web2PDF should perform actions when there is more than one action on the page.

For example, you may need to click on a button to reveal previously hidden elements before a screenshot can be taken to get the desired result.

You can also use a hint in multiple sequences. For example, data-vv-seq ="1,4" will allow you to rerun the hint for the first and fourth time. This is especially useful when you need to cover different scenarios for review.

You can also use a pre-sequence to remove the ISI or other pop-ups before Web2PDF takes a snapshot. For example, data-vv-seq="-1" will allow you to run the hint before the rest of the sequence.
All
Snapshot data-vv-snapshot "before", "after", "never", "once" When to take a snapshot. Default value is "after". See example below.

You can stack "once" with another snapshot modifier (data-vv-snapshot="once,before") to indicate that Veeva Web2PDF should take a snapshot only once before or after a sequence (data-vv-seq="1,2,3") instead of each time.
All
Device data-vv-device "smartphone", "tablet", "desktop", "all" Device that Veeva Web2PDF uses to crawl your site. Veeva Web2PDF users can select Desktop, Tablet, or Smartphone for the crawl.

By default, hints execute on all devices (data-vv-device="all"). You can also specify multiple device combinations (e.g. "smartphone,tablet", "desktop,tablet", or "desktop,smartphone").
All
Page Height data-vv-height Integer value Height (in pixels) of the page to include in the snapshot.
Reference the following height ranges based on your device. The maximum for all devices is 14400. Minimums vary by device:
  • Desktop - Min: 800
  • Tablet (Portrait) - Min: 1024
  • Tablet (Landscape) - Min: 600
  • Smartphone (Portrait) - Min: 640
  • Smartphone (Landscape) - Min: 360
If you enter a value less than the minimum, Veeva Web2PDF rounds up. If you enter a value greater than the maximum, Veeva Web2PDF rounds down.
All
Adding Hints with the Veeva Web2PDF Chrome Extension
You can browse your site and drop hints along the way with our new Hintify mode. Just right click on anything you want to add a hint to, and the Veeva Web2PDF Chrome extension (beta) automatically translates your clicks into hint actions that you can easily preview by generating a PDF directly from the Chrome extension. These hints are not permanent, and they are local to your computer. However, you can download your hints as a .js file and make them permanent via touchless hints.

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. Right click on each dynamic or interactive element in your website you want to capture in the PDF.
  5. Select an Event (Click, Hover, Fill, Wait, Remove, or FillSubmit). See details above.

    Screenshot of the create hint dialog,  with fields for event and modifer

  6. Enter or select Modifiers as required. Which fields are available is based on the Event you selected. See details above.
  7. Click Save. Vault adds your hints to the hint.js file.


Once you have captured all of your hints, click the Hint Tab button to preview your hint.js file. Veeva Web2PDF opens a new tab and displays each hint you created in a card.

From the Hints tab, you can edit, delete, or add descriptions to your hints.

To download your hints.js file, click the Download hint.js button in the extension. To make these hints permanent, see below.
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 the following format. You must add this .js file to your sitemap.

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


Note: You can also add custom JavaScript to .js files, which will only be executed when Veeva Web2PDF crawls your website.
Examples

To capture the standard before/after ISI snapshot with an ISI page hint:
$('html').attr('data-vv-isi','true');

A screenshot showing two pages, before and after an ISI is opened

To close a pop-up overlaying a page before Veeva Web2PDF takes a snapshot:
$('#desktop_web2PDF .close_modal').attr('data-vv-action','click');
$('#desktop_web2PDF .close_modal').attr('data-vv-seq','-2');
$('#desktop_web2PDF .close_modal').attr('data-vv-snapshot','never');


To remove the ISI on a page before 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');


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++;
}
);
Screenshots showing four pages, each with a different accordian section expanded
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"]
}
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.

Shows a webpage with three different carousel options

Carousel WITH Veeva Web2PDF's custom data attributes:

<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.