Install the widget
Add one script tag to any site, with ready-made snippets for HTML, JavaScript, React and Next.js.
PepoChat runs as a small loader script on your site. The loader draws the launcher button, and the chat itself opens in an isolated frame so it never conflicts with your page's styles or scripts. Installing it means adding one script tag with your Organization ID.
What you need
Your Organization ID from the dashboard's Widget Setup page. It is a 32-character code such as jh7d04q3v5r83n0j0sa1r4wecn8f2523, and it is the only thing that ties the widget to your workspace.
Find your Organization ID
Open Widget Setup
In the PepoChat dashboard, click Widget Setup in the left sidebar. Step 1 on that page shows your Organization ID with a Copy button.
Pick your platform
Step 2 lists the install options: HTML, React, Next.js, JavaScript and WordPress. Clicking one opens the snippet with your Organization ID already filled in. WordPress opens the plugin instructions instead of code.
The snippets
Every snippet below is what the dashboard generates, with YOUR_ORGANIZATION_ID in place of your real ID.
Paste this right before the closing </body> tag of every page where the widget should appear. Most sites have one shared layout or footer file, so you usually paste it once.
<!-- Paste before the closing </body> tag -->
<script
src="https://widget.pepochat.com/widget.js"
data-organization-id="YOUR_ORGANIZATION_ID"
></script>
Optional attributes
| Attribute | Values | Default | What it does |
|---|---|---|---|
data-organization-id | your ID | required | Connects the widget to your workspace. |
data-position | bottom-right, bottom-left | bottom-right | Which corner the launcher and chat window use. |
data-preload | true, false | true | Loads the chat in the background during idle time so the first open is instant. Set to false to load it only when a visitor clicks. |
See Widget behavior and JavaScript API for the window.EchoWidget methods.
Check that it works
Open your site in a new tab
The launcher appears in the corner you chose within a second or two of the page finishing. Click it: the chat opens with your greeting.
Ask something your content answers
The reply streams in word by word. Ask something your content does not cover and the agent says so and offers your team instead of guessing.
Look in the dashboard
Open Conversations. Your test chat is there, live, with the visitor's messages and the agent's replies.
Nothing appears?
The three usual causes are a wrong Organization ID, an allowed-domains list that does not include the site, and a caching layer still serving the old page. The troubleshooting page walks through each one.
Next steps
Something missing or wrong on this page? Tell us and we will fix it.
