Hooks

Hooks let you listen to Screeb lifecycle events. You can define hooks globally via the plugin config or per-survey/per-message.

Available hooks

Hook Name	Plugin config / init	surveyStart	messageStart
onReady	✅	❌	❌
onSurveyDisplayAllowed	✅	❌	❌
onMessageDisplayAllowed	✅	❌	❌
onRecordingStarted	✅	❌	❌
onRecordingStopped	✅	❌	❌
onSurveyShowed	✅	✅	❌
onSurveyStarted	✅	✅	❌
onQuestionReplied	✅	✅	✅
onButtonNavigateStarted	✅	✅	✅
onButtonNavigateCompleted	✅	✅	✅
onSurveyCompleted	✅	✅	❌
onSurveyHidden	✅	✅	❌
onMessageShowed	✅	❌	✅
onMessageStarted	✅	❌	✅
onMessageCompleted	✅	❌	✅
onMessageHidden	✅	❌	✅

caution

Decision hooks (onSurveyDisplayAllowed, onMessageDisplayAllowed) must answer within 5 seconds. Past that deadline the display evaluation fails and the survey is not shown — keep these callbacks fast and avoid slow network calls.

Global hooks (plugin config)

Define hooks once in main.ts:

createApp(App)
  .use(ScreebPlugin, {
    websiteId: "<YOUR-CHANNEL-ID>",
    autoInit: true,
    hooks: {
      version: "1.0.0",
      onReady: (payload) => {
        console.log("Screeb ready", payload);
      },
      onSurveyShowed: (payload) => {
        console.log("Survey showed", payload);
      },
      onSurveyCompleted: (payload) => {
        console.log("Survey completed", payload);
      },
    },
  })
  .mount("#app");

Per-survey hooks

Pass hooks to surveyStart():

<script setup lang="ts">
import { useScreeb } from "@screeb/sdk-vue";

const { surveyStart } = useScreeb();

await surveyStart("<survey-id>", undefined, false, {}, {
  version: "1.0.0",
  onSurveyCompleted: (payload) => {
    console.log("Survey completed", payload);
  },
});
</script>

Per-message hooks

Pass hooks to messageStart():

<script setup lang="ts">
import { useScreeb } from "@screeb/sdk-vue";

const { messageStart } = useScreeb();

await messageStart("<message-id>", true, {}, {
  version: "1.0.0",
  onMessageCompleted: (payload) => {
    console.log("Message completed", payload);
  },
});
</script>

Full payload definitions

Vue reuses the browser hook payload types. For complete payload type definitions and detailed information about each hook, see the JS tag hooks reference.

SPA navigation (in-page-spa)

The in-page-spa button target navigates without a full page reload, so the SDK and the onButtonNavigateCompleted hook survive. It auto-detects the host router: click-interception routers (SvelteKit, Astro, Nuxt) are driven via a real anchor click, and History-API routers (React Router, Angular, Vue Router) fall back to history.pushState + popstate (with hashchange for hash-mode routers). Cross-origin targets always trigger a normal full navigation.

For a router that can't be auto-detected, register a spaNavigationHandler in the plugin config (or pass it as the trailing argument to init()):

createApp(App)
  .use(ScreebPlugin, {
    websiteId: "<YOUR-CHANNEL-ID>",
    autoInit: true,
    spaNavigationHandler: (url) => router.push(url), // your Vue Router push
  })
  .mount("#app");

See the JS tag hooks reference for details.