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


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
  • Permanent
  • No changes to your website's code
  • Easy to update when you frequently change your website.
  • Easily back out & modify hints
  • 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.
  • 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).
  • 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: site entry hints, page hints and events.

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.

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.

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 shown. Event hints include:

  • Click
  • Hover
  • Fill
  • Wait
  • Remove
  • FillSubmit

Hint Execution

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
Adding Hints with the Veeva Web2PDF Chrome Extension

You can browse your site and drop hints along the way with Hintify mode. Just hover over an element on your site, right click on anything you want to add a hint to, and the Veeva Web2PDF Chrome extension 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. You can view and edit the hints you’ve added by navigating to the hint tab from the Chrome extension. You can also download your hints as a .js file to 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. 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 (Click, Hover, Fill, Wait, Remove, or FillSubmit).

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

  6. Fill in the fields, which may be dependent on the Event you selected.
  7. Click Save.
  8. Repeat for other elements on your website.

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. Note that these hints are stored locally, so others won’t be able to see 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 theDownload hint.js button in the extension and following the instructions 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 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');


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');

To close a modal that allows entry to the site:

$('#desktop_web2PDF .close_modal').attr('data-vv-action','click');
$('#desktop_web2PDF .close_modal').attr('data-vv-siteEntry',true);
$('#desktop_web2PDF .close_modal').attr('data-vv-siteEntrySeq','1');
$('#desktop_web2PDF .close_modal').attr('data-vv-snapshot','after');

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.
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
Site Entry data-vv-siteEntry “true”, “false” Set to “true” when the hint is used to allow entry to a site. Click, Fill, Fillsubmit
Site Entry Sequence data-vv-siteEntrySeq Any Integer value Sequence order in which Veeva Web2PDF should perform site entry actions when there is more than one site entry action on the page. Click, Fill, Fillsubmit