Svelte context and hooks

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

Available hooks

Hook Name	Provider config / init	surveyStart	messageStart
onReady	✅	❌	❌
onSurveyDisplayAllowed	✅	❌	❌
onMessageDisplayAllowed	✅	❌	❌
onSurveyShowed	✅	✅	❌
onSurveyStarted	✅	✅	❌
onQuestionReplied	✅	✅	✅
onSurveyCompleted	✅	✅	❌
onSurveyHidden	✅	✅	❌
onMessageShowed	✅	❌	✅
onMessageStarted	✅	❌	✅
onMessageCompleted	✅	❌	✅
onMessageHidden	✅	❌	✅

Global hooks (provider config)

Define hooks once in your root component:

<script lang="ts">
  import { setScreebContext } from "@screeb/sdk-svelte";

  setScreebContext({
    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);
      },
    },
  });
</script>

Per-survey hooks

Pass hooks to surveyStart():

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

  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 lang="ts">
  import { useScreeb } from "@screeb/sdk-svelte";

  const { messageStart } = useScreeb();

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