Web Integration Guide
Use a simple JavaScript snippet to add search to your site.
Integration Approaches
Qwik.select works with any website or application that can make HTTP requests. Choose the approach that best fits your tech stack and requirements:
RECOMMENDED
📄 Simple Widget
The easiest way to add search - just add our widget script and an input field.
- No coding required
- Auto-styled dropdown
- Mobile optimized
🏗️ CMS Integration
Works with OpenCart, WordPress and other platforms.
- Plugin compatibility
- Theme integration
- E-commerce optimized
Simple Widget Integration
The easiest way to add qwik.select to any website - just add our widget script and an input field:
Complete Widget Implementation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Store - Product Search</title>
<!-- Your existing CSS -->
</head>
<body>
<!-- Your site header and content -->
<!-- Search Input -->
<div class="search-section">
<h2>Find Products</h2>
<input
type="text"
id="product-search"
placeholder="Search for products..."
autocomplete="off"
class="search-input"
/>
</div>
<!-- Qwik.select Widget Script -->
<script type="text/javascript">
(function() {
// Load QwikSelectWidget script
const script = document.createElement("script");
script.src = "https://cdn.qwik.select/widget-latest.min.js?" + Date.now();
function initializeWidget() {
// Only initialize if widget is loaded
if (window.QwikSelectWidget && window.QwikSelectWidget.default) {
new window.QwikSelectWidget.default({
"id": "your-site-slug", // Your site slug from Studio
"searchInputSelector": "#product-search", // CSS selector for search field
"preserveInputStyle": false // Preserve original input styling (default: false)
});
}
}
script.onload = function() {
// Wait for DOM to be ready before initializing
if (document.readyState === "loading") {
// DOM still loading, wait for DOMContentLoaded
document.addEventListener("DOMContentLoaded", initializeWidget);
} else {
// DOM already loaded, initialize immediately
initializeWidget();
console.log("Qwik.Select widget initialized.");
}
};
document.head.appendChild(script);
})();
</script>
<!-- Your existing JavaScript -->
</body>
</html>Configuration Options
Required Configuration
1
2
3
4
{
"id": "your-site-slug", // Your site slug from Studio
"searchInputSelector": "#product-search" // CSS selector for search field
}Optional Configuration
1
2
3
4
5
{
"id": "your-site-slug", // Your site slug from Studio
"searchInputSelector": "#product-search", // CSS selector for search field
"preserveInputStyle": false // Preserve original input styling (default: false)
}preserveInputStyle: Set to true to keep your original input styling, false to use widget styling
Important Notes
- The widget automatically creates a styled dropdown with search results
- Make sure your XML feed is synced and your site is active in the Studio
- The widget is mobile-responsive and includes touch support