Install the widget
Add one script tag to any site, with ready-made snippets for HTML, JavaScript, React and Next.js, or share the hosted chat page.
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.
Hosted chat page
Your agent also lives on its own page, no website needed. The Hosted chat page card on Widget Setup shows the address, with Open and Copy buttons:
https://widget.pepochat.com/full?organizationId=YOUR_ORGANIZATION_ID
The page fills the browser with a soft gradient in your brand color and shows the chat in a centered card (the whole screen on phones). There is no launcher and no close button; everything else, from the Home screen to Help articles and bookings, works as in the embedded widget. Link to it from emails, print it as a QR code, or put it in a link-in-bio.
If you use an allowed-domains list, the hosted page is blocked until you switch on Allow the hosted chat page on the same card; the card warns you and the page shows the allowed-domains error until then. Once on, anyone with the link can chat.
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. Close the chat window on your site and reply from the dashboard: the launcher shows a red badge with the number of replies waiting.
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.
