Introduction

Welcome to CueCatch — a flexible web component for building dynamic surveys with JSON.

Welcome to CueCatch, your tool for creating dynamic and adaptable surveys.

What is CueCatch?

CueCatch is a purpose-built web component offering exceptional flexibility, customization, and programmability. Creating a survey with CueCatch is straightforward: provide JSON-based data, and it renders your survey design.

CueCatch's capabilities extend beyond creation. Its integration into your existing tech stack enables real-time data capture and interactive experiences. Style your surveys to match your brand using themes and CSS, and use event listeners to respond dynamically to user input.

With CueCatch, you have full control over every aspect of your surveys. Build tailored data-gathering tools that meet your evolving needs.

Minimal example

view source

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic</title>
  <link rel="stylesheet" href="../common.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/cuecatch@latest/v1.main.js"></script>
</head>

<body>
  <cue-catch src="./source.json" />
</body>

</html>

CSS

html, body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

JSON

{
	"$schema": "https://www.cuecatch.com/schemas/survey.schema.json",
	"name": "Basic",
	"startScreens": [
		{
			"header": "Welcome to Our Survey!",
			"description": "Thank you for participating.",
			"okButtonLabel": "Start Survey"
		}
	],
	"pages": [
		{
			"blocks": [
				{
					"title": "What’s your favorite type of weather?",
					"inputs": [
						{
							"type": "RADIO",
							"label": "Sunny and warm"
						},
						{
							"type": "RADIO",
							"label": "Cozy and rainy"
						},
						{
							"type": "RADIO",
							"label": "Snowy and magical"
						}
					]
				}
			],
			"nextButtonLabel": "Submit"
		}
	],
	"completeScreens": [
		{
			"header": "Thank You!",
			"description": "Your responses have been recorded.",
			"okButtonLabel": "Close"
		}
	]
}

Key Benefits

Highly Customizable

Adjust its size, position, and styling to blend with your brand and style using CSS. Choose a theme or create a unique design that suits your needs.

Easy Integration

Leverage event listeners for seamless data capture and dynamic interactions. CueCatch seamlessly integrates with your existing tech stack, whether it’s Angular, React, Vue, jQuery, or plain JavaScript.

Exceptional Flexibility

Create traditional surveys or opt for engaging conversational formats. With CueCatch’s intuitive block-based layout, you have unmatched flexibility and control over the structure and flow of your questions.

Powerful Survey Tools

CueCatch provides a comprehensive toolkit. Create dynamic, intelligent surveys using features like input validation, skip logic, branching, randomization, piping, and custom variables.

Programmable

CueCatch’s JSON-based design makes your surveys truly adaptable. It allows you to manage versions, load content dynamically, conduct A/B testing, and implement advanced strategies like Survey Segmentation and Audience Retargeting.

Full Data Control

With the self-hosting option, you maintain full control and ownership of your sensitive survey data. Ensure compliance with privacy regulations and meet your specific security needs.