Widget Installation Guide
Widget Installation Guide
Step 1: Get Your Widget Code
- Login to Kinexa dashboard
- Go to Messenger > Settings > Widget
- Copy your unique embed code
Your code will look like this:
<script src="https://api.liqaa.id/widget.js"
data-widget-key="wk_YOUR_KEY"
data-guest-mode="true"
data-color="#2563eb">
</script>Step 2: Install on Your Platform
Plain HTML
Paste the code before the </body> tag in every page:
<body>
<!-- your content -->
<script src="https://api.liqaa.id/widget.js" data-widget-key="wk_YOUR_KEY"></script>
</body>WordPress
- Go to Appearance > Theme Editor (or use a plugin like Insert Headers & Footers)
- Open
footer.php - Paste the widget code before
</body> - Save changes
Shopify
- Go to Online Store > Themes > Edit Code
- Open
theme.liquid - Paste before the closing
</body>tag - Save
React / Next.js
Add to your root layout or _app.tsx:
import Script from "next/script";
export default function Layout({ children }) {
return (
<>
{children}
<Script src="https://api.liqaa.id/widget.js"
data-widget-key="wk_YOUR_KEY"
strategy="lazyOnload" />
</>
);
}Vue / Nuxt
Add to your app.vue or nuxt.config.ts:
<template>
<div>
<NuxtPage />
</div>
</template>
<script setup>
useHead({
script: [{ src: "https://api.liqaa.id/widget.js", "data-widget-key": "wk_YOUR_KEY" }]
});
</script>Step 3: Verify Installation
- Open your website in a browser
- You should see a chat icon in the bottom-right corner
- Click it and send a test message
- Check your Liqaa inbox — the message should appear
Troubleshooting
- Widget not appearing? Check your domain is verified and the widget key is correct
- Console errors? Make sure the script is loaded over HTTPS
- Ad blockers may hide the widget — test in incognito mode