This guide explains how to add the Jim’s Chat widget to your website and how to change its behaviour and colours.
No coding experience is required; you only need to paste a few snippets and edit some values.
How to embed the widget
Add the widget to your webpage in two steps:
- Include the widget script
Put this before the closing</body>tag. The widget is hosted on our CDN—use this URL exactly:
<script type="module" src="https://cdn.jims.net/chatwidget/chatwidget.js"></script>
- Place the widget on the page
Where you want the chat button to appear, add this tag:
<jims-chat></jims-chat>
Example:
<jims-chat></jims-chat> <script type="module" src="https://cdn.jims.net/chatwidget/chatwidget.js"></script>
Save the page and open it in a browser. The chat button should appear (usually in the bottom-right corner) when the chat is available.
Widget settings
You can change how the button looks and where it sits by passing settings as a JSON object in the settings attribute.
Basic example with settings
<jims-chat settings='{"button":{"text":"Chat with us","position":{"horizontal":"right","vertical":"bottom"},"orientation":"horizontal"}}'></jims-chat>
What each setting does
Button
| Setting | What it controls | Allowed values |
|---|---|---|
| button.text | The label on the chat button | Any text, e.g. "Live Chat", "Help", "Chat with us" |
| button.position.horizontal | Horizontal position of the button | "left", "middle", "right" |
| button.position.vertical | Vertical position of the button | "top", "middle", "bottom" |
| button.orientation | Direction of the button text | "horizontal" (normal text), "vertical" (text top to bottom), "vertical-bt" (text bottom to top). Vertical orientations are only used when the button is on the left or right (any vertical position); otherwise the widget falls back to horizontal. |
Info panel (pre-chat form)
| Setting | What it controls |
|---|---|
| info.headerTitle | Heading shown at the top of the panel, e.g. "Want to chat with a real person?" |
| info.closeLabel | Accessible label for the close button, e.g. "Close" |
| info.bodyText | Short description above the form, e.g. "Fill in the details below and we'll get you connected to a real person." |
| info.submitLabel | Label for the submit button, e.g. "Get chatting" |
Example: button on the left, at the top
<jims-chat settings='{"button":{"text":"Need help?","position":{"horizontal":"left","vertical":"top"},"orientation":"horizontal"}}'></jims-chat>
Example: vertical button on the right
Vertical text is only applied when the button is on the left or right (any vertical position):
<jims-chat settings='{"button":{"text":"Chat","position":{"horizontal":"right","vertical":"bottom"},"orientation":"vertical"}}'></jims-chat>
Example: custom info panel text
<jims-chat settings='{"button":{"text":"Chat","position":{"horizontal":"right","vertical":"bottom"},"orientation":"horizontal"},"info":{"headerTitle":"Talk to us","bodyText":"Share your details and we'll connect you.","submitLabel":"Start chat"}}'></jims-chat>
Tip: Keep the settings value in single quotes '...' and put the JSON in double quotes "..." inside, as in the examples. If you need a quote in your button text, use \" (backslash then double quote) inside the JSON.
Changing colours with CSS variables
The widget exposes CSS variables (custom properties) so you can match its colours to your site. Add a <style> block in your page (for example in the <head>), or put these rules in your site’s main CSS file.
You can override these --jims-chat- variables on the jims-chat element:
| Variable | What it affects | Example value |
|---|---|---|
| –jims-chat-color | Button background, info panel header, accents | #0255a5 (blue) or any hex colour |
| –jims-chat-color-foreground | Text and icons on top of the accent colour | #ffffff (white) or any colour |
Example: blue button and white text (default style):
jims-chat {
--jims-chat-color: #0255a5;
--jims-chat-color-foreground: #ffffff;
}
Example: green button with white text:
jims-chat {
--jims-chat-color: #2d7a3e;
--jims-chat-color-foreground: #ffffff;
}
Target the jims-chat element (the custom tag you added to the page). If your CSS is global, you can use jims-chat { ... } as in the examples above.
Full example page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My website</title>
<style>
jims-chat {
--jims-chat-color: #0255a5;
--jims-chat-color-foreground: #ffffff;
}
</style>
</head>
<body>
<h1>Welcome to my site</h1>
<p>Use the chat button if you need help.</p>
<jims-chat settings='{"button":{"text":"Chat with us","position":{"horizontal":"right","vertical":"bottom"},"orientation":"horizontal"}}'></jims-chat>
<script type="module" src="https://cdn.jims.net/chatwidget/chatwidget.js"></script>
</body>
</html>
Adjust the settings and the CSS variables to match your brand and layout.