WordPress, Shopify, Webflow and Framer
Every platform ends up with the same chat. Pick yours. You need your Widget ID, which you find in your dashboard under the bot's name. For any other builder (Squarespace, Ghost…) see the installation guide.
WordPress and WooCommerce: the free plugin
Techvea Support Bot is a free plugin. It adds the chat to every page, and on WooCommerce it adds live order and stock lookup (on plans that include it).
- Download techvea-support-bot-latest.zip.
- In WordPress: Plugins → Add New → Upload Plugin → choose the zip → Install → Activate.
- Open the new Techvea Support Bot menu → Support Bot, paste your Widget ID and save.
Where it is listed
Shopify
On every page (recommended, about two minutes, no app): paste the script tag from your Techvea dashboard into your theme once.
- Copy your embed code: open your bot in the Techvea dashboard, Basics, Embed code.
- In Shopify open Online Store → Themes → ⋯ → Edit code, and under Layout open
theme.liquid. - Paste the script tag on its own line just before
</body>, and press Save. - Open your store in a new tab: the chat bubble appears on every page.
Only on some pages (optional): use our one-file theme section instead. It shows the chat only on the page templates where you add it, for example just the Home page, and gives you a Widget ID box in the theme editor.
- Download techvea-support-bot.liquid.
- In Edit code, right-click the sections folder, choose Upload… and pick the file (or choose New File, name it
techvea-support-bot.liquidand paste the contents). Save. - Press Customize, open the page you want, press Add section and choose Techvea Support Bot. Paste your Widget ID and press Save. Repeat for each page.
Pick one
{%- comment -%}
Techvea Support Bot: a theme section. In the theme editor open the Footer group, press Add section,
choose "Techvea Support Bot", paste the Widget ID from your Techvea dashboard, and save.
{%- endcomment -%}
{%- assign widget_id = section.settings.widget_id | strip -%}
{%- if widget_id != blank -%}
<script src="https://techvea.com/widget.js" data-widget-id="{{ widget_id | escape }}" async></script>
{%- elsif request.design_mode -%}
<p style="padding:12px;font:14px sans-serif">Techvea Support Bot: paste your Widget ID in this section's settings.</p>
{%- endif -%}
{% schema %}
{
"name": "Techvea Support Bot",
"settings": [
{
"type": "text",
"id": "widget_id",
"label": "Widget ID",
"info": "Copy it from your Techvea dashboard (it looks like wgt_xxxxxxxx)."
}
],
"presets": [{ "name": "Techvea Support Bot" }]
}
{% endschema %}
To let the bot look up orders and stock, see Shopify orders and stock.
For Shopify app developers: the theme app extension
If you build Shopify apps with the Shopify CLI, we also provide a theme app extension (an app embed). It has no server code; it only loads our script. Download it, copy extensions/techvea-support-bot into a Shopify CLI app, and run shopify app deploy. Merchants then install your app and turn it on under Customize → App embeds.
{%- comment -%}
Techvea Support Bot: an app embed. Turn it on under Online Store > Themes > Customize > App embeds,
then paste the Widget ID from your Techvea dashboard.
{%- endcomment -%}
{%- assign widget_id = block.settings.widget_id | strip -%}
{%- if widget_id != blank -%}
<script src="https://techvea.com/widget.js" data-widget-id="{{ widget_id | escape }}" async></script>
{%- endif -%}
{% schema %}
{
"name": "Techvea Support Bot",
"target": "body",
"settings": [
{
"type": "text",
"id": "widget_id",
"label": "Widget ID",
"info": "Copy it from your Techvea dashboard (it looks like wgt_xxxxxxxx)."
}
]
}
{% endschema %}
Webflow
One click: in your dashboard open the bot → Channels → Website builders → Webflow → Connect Webflow, approve, pick the site and press “Add chat to this site”. We add one script to the site footer and can publish for you. “Remove and disconnect” takes it out again.
Manual: Site settings → Custom code → Footer code. Paste the script tag below and publish.
<script src="https://techvea.com/widget.js" data-widget-id="YOUR_WIDGET_ID" async></script>Plan note
Framer
Component (type the ID, no code):
- In Framer open Assets → Code → New component. Name it TechveaSupportBot.
- Replace everything with the code below and save.
- Drag the component onto your page (put it in a shared layout to cover every page), then type your Widget ID in the properties panel.
- Publish. The chat appears on the live site; on the canvas you only see a small label.
import { useEffect } from "react"
import { addPropertyControls, ControlType, RenderTarget } from "framer"
/**
* Techvea Support Bot
* Adds your AI support chat to the page. Paste your Widget ID (from the Techvea dashboard).
*
* @framerSupportedLayoutWidth any
* @framerSupportedLayoutHeight any
*/
export default function TechveaSupportBot(props) {
const { widgetId } = props
const target = RenderTarget.current()
const onCanvas = target === RenderTarget.canvas || target === RenderTarget.thumbnail
const valid = /^[A-Za-z0-9_-]{6,40}$/.test(widgetId || "")
useEffect(() => {
if (onCanvas || !valid || typeof document === "undefined") return
// Only ever add the chat once, even if the component is on several pages.
if (document.querySelector('script[data-widget-id="' + widgetId + '"]')) return
const s = document.createElement("script")
s.src = "https://techvea.com/widget.js"
s.async = true
s.setAttribute("data-widget-id", widgetId)
document.body.appendChild(s)
}, [widgetId, onCanvas, valid])
// On the Framer canvas show a small label. On the live site the component takes no space.
if (!onCanvas) return <div aria-hidden style={{ display: "none" }} />
return (
<div
style={{
width: "100%", height: "100%", minHeight: 64, display: "flex", alignItems: "center",
justifyContent: "center", gap: 10, borderRadius: 12, background: "#111", color: "#fff",
font: "600 14px system-ui, sans-serif", padding: 12, boxSizing: "border-box", textAlign: "center",
}}
>
{valid ? "Techvea Support Bot ready: " + widgetId : "Techvea Support Bot: paste your Widget ID"}
</div>
)
}
TechveaSupportBot.defaultProps = { widgetId: "" }
addPropertyControls(TechveaSupportBot, {
widgetId: {
type: ControlType.String,
title: "Widget ID",
placeholder: "wgt_xxxxxxxx",
defaultValue: "",
},
})
No component: Site settings → Custom code → End of body tag, paste the script tag from the Webflow section above, and publish. Custom code needs a paid Framer site plan.
Marketplace
Something not working? Write to us with the platform and the page address.