How to Add Asyntai AI Chatbot to Kartra

Step-by-step guide for Kartra pages and funnels

Platform:

Langkah 1: Dapatkan Kod Benam Anda

Pertama, pergi ke Papan Pemuka Asyntai anda dan tatal ke bawah ke bahagian "Kod Benam". Salin kod benam unik anda yang akan kelihatan seperti ini:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Nota: Kod di atas hanyalah contoh. Anda mesti menyalin kod benam unik anda sendiri dari Papan Pemuka anda kerana ia mengandungi ID widget peribadi anda.

Step 2: Add a Code Section to Your Page

Kartra lets you drop custom HTML and JavaScript straight into any page you build with the Page Builder. Open the page or funnel step where you want the chatbot to appear, then:

Log in to your Kartra account and open My Pages (or My Funnels and select the funnel step you want to edit).
Click Edit to open the page in the Kartra Page Builder.
Click + Add Section and choose Your Code to insert a full-width code block. Alternatively, open Components and drag a Your Code element into an existing column.

Nota: Custom Code is available on Kartra's Growth, Professional, and Enterprise plans. If you don't see the Your Code option, check your plan under your account Billing section.

Step 3: Paste Your Embed Code

Kartra requires all custom code to sit inside a special DIV wrapper so it renders correctly once the page is published:

Select the code block you just added and click the orange pencil / edit button to open the code editor. (For an existing section, click the blue gear icon on the section's right edge and choose Edit source code.)
Paste your Asyntai embed code inside the required data-embed wrapper, exactly like this:

<div data-embed="true">
    <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
</div>

Click Save to store your code, then close the editor.

Penting: The <div data-embed="true"> wrapper must be used exactly as written. Kartra uses it to identify your custom code, and the widget will not load without it. You may only use one data-embed wrapper per section, but you can place as much code as you like inside it.

Step 4: Save and Publish Your Page

Your changes go live only after the page is published:

Click Save at the top of the Page Builder to save the whole page.
Click Save & Publish (or Next to move through the publish flow) to push your changes live.
Open the live page URL to confirm the chatbot appears.

Petua: Consider cloning your page before adding code so you have a clean copy to fall back on while you test.

Adding the Chatbot to Multiple Pages

The Your Code element is added per page, so the chatbot only appears on the pages where you place it. To show it across your whole funnel or site:

Repeat Steps 2 and 3 on each Kartra page or funnel step where you want the chatbot to appear.
Use the same embed code and data-embed wrapper on every page.
Publish each page after adding the code.

Nota: Because Kartra applies custom code at the page level rather than site-wide, there is no single global setting to add the widget everywhere at once. Add the Your Code element to each page you want it on.

Langkah 4: Sahkan Pemasangan

After publishing your page, open it in a new browser tab or incognito window. You should see the chat widget button in the bottom right corner. Click it to ensure it opens and functions correctly.

Tidak nampak widget? Make sure you have both saved and published your page. Confirm your embed code is inside the <div data-embed="true"> wrapper. Clear your browser cache or view in incognito mode, as Kartra may cache pages for a few minutes. Check the browser console (F12) for any JavaScript errors.

Perlukan Bantuan?

If you are not comfortable adding custom code, Kartra's support team can help with the Your Code element and page publishing. You can also contact Asyntai support for guidance on installing the chatbot on your Kartra pages.

Sokongan Profesional: Kartra offers a community and support resources, and many Kartra agencies can help if you need professional assistance with custom code or page design.

Dokumentasi