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.

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:

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.

Chrome Extension Create Hint

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.

Hints Management Tab

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.

Hint Tab with Menu

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.

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

ISI Page Hint Example

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++;
}
);

Accordion Page Hint Example

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

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.

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.

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.

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. For example, “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 above.

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.

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 above. 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. All
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. All
Snapshot data-vv-snapshot “before”, “after”, “never”, “once” When to take a snapshot. Default value is “after” for regular hints and “before” for site entry hints. 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
Smartphone (Portrait) - Min: 667
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, Remove, 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, Remove, FillSubmit