Integration guide

Asklify + Vue.js

A small composable mounts the widget when your app boots. Works with Vue 3, Nuxt, and Vite setups.

Prerequisite: an Asklify project with some knowledge added — the quickstart covers that in a couple of minutes. You'll need your public project ID (pub_...) from Widget → Install.

Create the composable

Copy the composable below into your composables directory.

Use it in App.vue

src/App.vue

<script setup lang="ts">
import { useAsklify } from "./composables/useAsklify";

useAsklify(import.meta.env.VITE_ASKLIFY_PROJECT_ID);
</script>

<template>
  <RouterView />
</template>

Nuxt users

In Nuxt, call the composable inside app.vue or register the script via useHead with the defer and data-project-id attributes — client-side only.

Ready-to-use template

Copy, paste, replace the project ID — that's the whole integration:

src/composables/useAsklify.ts

import { onMounted, onUnmounted } from "vue";

const SCRIPT_ID = "asklify-widget-script";

export function useAsklify(projectId: string) {
  onMounted(() => {
    if (document.getElementById(SCRIPT_ID)) return;
    const script = document.createElement("script");
    script.id = SCRIPT_ID;
    script.src = "https://api.asklify.in/widget.js";
    script.defer = true;
    script.setAttribute("data-project-id", projectId);
    document.body.appendChild(script);
  });

  onUnmounted(() => {
    document.getElementById(SCRIPT_ID)?.remove();
    document.getElementById("kb-widget-launcher")?.remove();
    document.getElementById("kb-widget-frame")?.remove();
  });
}

All appearance and behavior — name, greeting, colors, theme, position, suggested questions — is configured in your dashboard under Widget settings and applies instantly without redeploying. See the widget configuration reference.

Event handling

To react to what happens in conversations — a chat starting, a customer requesting a human, feedback submitted — subscribe to webhooks. For fully custom experiences, the REST API exposes chat with streaming, knowledge search, and conversation transcripts.

Best practices

Call the composable from App.vue (not a routed page) so navigation doesn't remount the widget.
Store the project ID in VITE_ASKLIFY_PROJECT_ID per environment.

Troubleshooting

SSR errors in Nuxt — the composable touches document; wrap the call in <ClientOnly> or guard with import.meta.client.

Still stuck? Check the error reference or email hello@asklify.in.