Page Manipulation SDK

Getting Started

1. Insert the Intelligent Tag.
2. Review the Intelligent Handshake® Plan and identify target HTML Elements.
3. Choose an Implementation Mode (HTML Orchestration or JavaScript Callback).
4. Define the Default Experience.
5. Prepare the target HTML Elements.
6. Create Intelligent Handshake® HTML Script Elements.
7. Create the Page Plan Object.
8. Start Manipulation Mode
9. Test different user experiences with URL parameters.

Review the Intelligent Handshake® Plan

As the integration engineer, you’ll receive an Intelligent Handshake® Plan. This plan describes how to enhance the page experience while meeting business objectives.

• Study the plan carefully to understand its goals.
• Map each step of the plan to specific HTML elements on your site.
• Visualize the full journey: the default state (before), the change (transition), and the personalized result (after).

This ensures that the intended user experience is implemented accurately and consistently.

Implementation Options

The SDK supports two rendering modes:

HTML Orchestration Mode

Declarative. Controlled entirely through the Page Plan Object. Recommended for most implementations.

JavaScript Callback Mode

Programmatic. Controlled by your custom callback. Use when you need flexibility (analytics, dynamic rendering, third-party integrations)

Both modes can be used together.

Define the Default Experience

The Internet isn’t always predictable. A well-defined Default Experience ensures that the page remains usable and positive in every scenario, even if network conditions or responses vary.

Two primary approaches can be mixed across multiple elements of a page:

Server Default Render

• The server renders the default HTML as-is.
• The Page Manipulation SDK does not alter these elements.

Manipulation Default Render

• The server renders an empty placeholder or simple default markup.
• The Page Manipulation SDK injects or replaces this content once the Score Rendering is Triggered.

Prepare the Target HTML Elements

Manipultion IDs

Each target element in the Intelligent Handshake® Plan must have a unique id. You can use existing IDs or add new ones as needed.

Visibility IDs

Both of the following can act as visibility triggers that start the rendering process when they first become visible in the viewport:

• elementPlans.elementIDs — one or more target element IDs defined within each Element Plan.
• triggerElementID — an optional, additional element ID at the Page Plan level.

When any one of these elements becomes visible, Intelligent Handshake® evaluates the user’s Score and begins rendering the appropriate experience.

Example

<div id="wrapper"></div>     <!-- optional PagePlan triggerElementID -->
<div id="offer"></div>     <!-- part of elementPlans.elementIDs -->

This design ensures you can control rendering based on either the primary elements you’re manipulating or a dedicated “trigger” element.

Create Intelligent Handshake® HTML Script Elements

A custom <script> type was created for defining manipulation experiences in native HTML:

Example

<script type="html/intelligenthandshake" id="IH_Hero_H" ...>
   ...
   <div>
      ...
   </div>
   ...
</script>

These elements are invisible to the browser but available to the SDK for orchestration. This lets developers design experiences using familiar HTML in their normal tools.

Create Page Plan Object

The Page Plan Object links Intelligent Handshake® Scores to the experiences defined in HTML or code. It is a JavaScript configuration object that drives the Page Manipulation SDK.

Page Plan Object Definition

Element Plan Object Definition

HTML Score Object Definition

Segment Object Definition

Manipulation Modes

None - Do nothing
Append - Add manipulation content after existing HTML
Replace - Replace existing HTML with manipulation content

Example

<script type="text/javascript">
	theIntelligentHandshakePagePlan =
	{
		defaultTimeoutAfterLoad: 10,
		actionKey: "0123a...XyZ==",
		triggerElementID: "id517024-3232",
		triggerVisiblityThreshold: 0.01,
		onRender: SimpleShowScoreOverlay,
		elementPlans:
		[
			{
				elementIDs: ["id151841-409", "id151841-52"],
				defaultMode: "None",
				defaultHTMLID: null,
				HTMLScores: [
					{
						score: "H",
						mode: "Append",
						HTMLID: "IH_Hero_H"
					}
				]
			}
		]
	}
</script>

Start Manipulation Mode

The following snippet should be added after the theIntelligentHandshakePagePlan object is defined.

This snippet registers your Page Plan with the Intelligent Handshake SDK.

Example

<script type="text/javascript">
(function(p){(function c(k){if(window.intelligenthandshake?.ManipulationMode?.Start){intelligenthandshake.ManipulationMode.Start(p)}else if(k<100){setTimeout(()=>c(k+1),50)}})(0)})
(   theIntelligentHandshakePagePlan   );
</script>

https://livesite.com/?ihscore=L
https://livesite.com/?ihscore=M
https://livesite.com/?ihscore=H
https://livesite.com/?ihscore=NB

https://livesite.com/?ihscore=H&ihmilliseconds=0
https://livesite.com/?ihscore=H&ihmilliseconds=300
https://livesite.com/?ihscore=H&ihmilliseconds=1000