# URL Test Integration Code

{% hint style="warning" %}
In SPA (Single Page Application) framework environments (React, Vue.js, Angular), the feature may not work correctly during page navigation other than initial page entry, so it is not recommended.
{% endhint %}

A URL Test requires a one-time Hackle JavaScript SDK integration. You need to insert the integration code below into the HTML of the page you want to integrate in order to initialize the SDK.

If the SDK is already integrated on the page, no additional code work is required.

```html
<!-- Add inside the head of the existing code -->
<script src="https://cdn2.hackle.io/npm/@hackler/javascript-sdk@11.43.0/lib/index.browser.umd.min.js"></script>
<script>
window.hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY");
</script>
```

For versions below 11.26.0, you must set the `track` option to true when integrating to identify the current page.

```html
<!-- Example for versions below 11.26.0 -->
<script src="https://cdn2.hackle.io/npm/@hackler/javascript-sdk@11.25.2/lib/index.browser.umd.min.js"></script>
<script>
window.hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY", {
  auto_track_page_view: true,
});
</script>
```

#### Anti-flicker Code for URL Tests

Due to the nature of URL Tests, when a user first enters the target URL (Option A) page, the Option A page may be briefly displayed before redirecting to Option B, C, etc.

Since exposing the Option A page can affect the test results, you can add code that hides the screen until the URL Test distribution and page navigation are fully completed.

```html
<!-- Add above the SDK integration code inside the head of the existing code  -->
<style>
.hackle_init_hide {
  opacity: 0 !important;
}
</style>
<script>
(function(e){var n="hackle_init_hide";document.documentElement.className+=n;var t=function(){document.documentElement.className=document.documentElement.className.replace(RegExp(" ?"+n),"");window.removeEventListener("hackle-initialize-done",t)};setTimeout(t,e);window.addEventListener("hackle-initialize-done",t)})(4000);
</script>
```

When this script is inserted, the screen is hidden for up to the maximum timeout (4 seconds) or until the SDK integration is complete. Once integration is complete, either the Option A page is shown exclusively, or when navigating to Option B, C, etc., only the target page is shown without exposing the Option A page.

If you want to reduce the timeout, change the value of 4000(ms) to your desired value. Below is an example with the maximum timeout reduced to 1 second.

```html
<!-- Add above the SDK integration code inside the head of the existing code  -->
<style>
.hackle_init_hide {
  opacity: 0 !important;
}
</style>
<script>
(function(e){var n="hackle_init_hide";document.documentElement.className+=n;var t=function(){document.documentElement.className=document.documentElement.className.replace(RegExp(" ?"+n),"");window.removeEventListener("hackle-initialize-done",t)};setTimeout(t,e);window.addEventListener("hackle-initialize-done",t)})(1000);
</script>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hackle.io/en/ab-test/url-test/url-test-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.