Website widget, portal and tray

Visitors reach your team from three places. The website widget needs setting up once for each website; the portal and the tray work as soon as chat is switched on.

Website widgets#

A widget is the chat button for one website. Add one for your own site, and one for each customer who wants chat on their own website. Each widget has its own embed code.

Open Settings > Chat and choose the Widgets tab.

Each widget card shows whether it is On, how many chats it has had, its Embed code, Allowed websites, Logo, Opening hours and Key, with Try it on a sample page, New key and Delete at the bottom. Use the switch at the top right to turn a widget off without deleting it.

Note: Portal and tray chats wear the brand of your first widget that is switched on (its name, colour and logo), so set up your own website's widget first.

Adding a widget#

1. Press Add widget.
2. Enter a Name, for you, such as the website's address.
3. Under Whose website, leave it empty for your own site, or choose the customer whose site it is. Visitors on a customer's widget who are not known contacts are taken to be that customer's.
4. Under Allowed websites, enter the addresses the widget may run on, such as https://www.example.co.uk, or https://*.example.co.uk for every subdomain. Leave it empty to allow any website.
5. Set the Name shown to visitors (empty uses the portal's name) and the Colour. Pick a swatch or type a hex colour.
6. Optionally write a Greeting. Empty uses the greeting on the Wording tab.
7. Choose the Button position: Bottom right or Bottom left.
8. Under Chat channel, choose how chats from this website find their channel:
   • Visitors choose: visitors pick Support, Sales and so on when there is more than one channel. A page matching a channel's page rules goes straight there.
   • By page and rules: no picker; the page and your routing rules decide.
   • Always one: every chat from this website goes to one channel.
9. Turn on Search our help to let visitors search your published help articles before they start a chat (see below).
10. Turn on Invite visitors to chat for a "Can we help?" bubble by the chat button (see below).
11. Turn on Its own opening hours if this website should keep different hours from the rest of chat. Otherwise it follows the usual chat hours.
12. Press Save widget.

The widget card sums these up under Chat channel, for example "Visitors choose · Help search on · Invites visitors".

To add a logo, press Upload beside Logo on the widget card. PNG, JPEG, WebP or GIF files up to 1 MB are accepted.

Tip: Always fill in Allowed websites for a live site. It stops anyone copying your embed code onto another website.

Putting the widget on a website#

1. On the widget card, press the copy button beside Embed code. It is one line:

   <script src="https://your-tenvara-address/portal/widget.js" data-key="wk_..." async></script>
   

2. Paste it into the website, just before the closing </body> tag. On WordPress and most site builders, use the footer scripts setting.

3. Load the website. The chat button appears in the corner you chose.

The code adds the chat button and nothing else. The widget is sealed off from the website's own styles, so it looks the same everywhere, and it follows the visitor's light or dark setting. To put the button on the other side for one website only, add data-position="left" (or right) to the tag.

Press Try it on a sample page to see the widget on a demonstration website before you put it live.

Search our help#

With Search our help on, the widget offers a search box before "What can we help with?". Visitors type their question and see your published help articles, and open the one that fits. Many questions are answered there and then, and anyone who still needs a person carries on into the chat as usual.

Inviting visitors to chat#

Invite visitors to chat shows a small "Can we help?" bubble beside the chat button. Set:

• the Message (empty uses "Can we help? We are here if you have any questions."),
• After this many seconds on the page,
• Returning visitors only, if you only want to prompt people who have been before,
• Only on pages whose address contains, such as /pricing or /contact. Empty shows it on every page.

It shows once a visit and never while the visitor is already chatting.

Opening the chat from your own page#

The widget gives the page a small JavaScript API, named after your brand: a brand called "Harbour IT" gives window.HarbourITChat. Add data-api="MyChat" to the script tag to choose the name yourself, so your page can use it before the widget has loaded.

You can also do without any code:

• add data-open="true" to the script tag to open the chat as soon as the page loads, for example on your contact page,
• give any button or link a data-chat-open attribute, and clicking it opens the chat:

<button data-chat-open>Chat with us</button>

The pages a visitor moves through are passed to the console, so whoever answers sees where they are.

New key and deleting#

• New key replaces the widget's key. The old embed code stops working, so update every website that uses it.
• Delete removes the widget. Its past chats stay in history.

What website visitors see#

A visitor presses the chat button and the panel opens: docked in the corner on a computer, full screen on a phone.

1. Who to chat with: when the widget lets visitors choose and you offer more than one channel, they pick Support, Sales and so on first.
2. Their details: first name (always), and the surname, work email, phone and company, as set on the Visitors tab of Settings > Chat. The email is matched to your contacts, as a hint for your team rather than proof of who they are.
3. What is wrong: a short description of the problem. Too short, or just "hello", gets a friendly nudge to say more.
4. Waiting: their place in the queue and how long they have waited.
5. Chatting: messages both ways, typing indicators, Seen receipts, and files by picker, paste or drag and drop.
6. Ended: a rating from 1 to 5 with a comment, email me the transcript, and the option to start again.

The widget remembers the visitor on that website, so if they come back while their chat is open, they carry on where they left off. Not you? forgets them. Unsent messages are kept and sent again when the connection comes back.

When chat is closed, the widget shows the closed message and the next opening, and offers the ticket request form instead (or the button is hidden, if you chose Hide the chat button).

The customer portal#

Signed-in contacts see Chat in the portal's menu while chat is on for their company.

• There are no details to fill in: the portal already knows who they are. When Where visitors choose a channel is on for the portal, they choose Support, Sales and so on first.
• The current chat is live, with End chat, a mute button, and the same rating and transcript at the end.
• Out of hours, they see the closed message, the next opening and a request form with just What can we help with?.
• Past chats lists their earlier chats, newest first, each opening a read-only transcript. Chats that became tickets link to the ticket.

The portal's home page also shows a small Chat with us card while a chat can start.

The tray on managed computers#

On a managed computer, the Tenvara tray offers Chat with support. It opens a chat window tied to that computer.

• If Tenvara recognises the signed-in account (a Microsoft 365 sign-in or an email address matching a contact), the person goes straight to describing the problem. The console shows this as a match from the computer's sign-in, not as proof of who they are.
• If not, they are asked for their name and email first, which are matched to a contact at the device's customer.
• When the tray picker is on, the chat window asks which channel first.

A technician can also start a chat in the tray: Message the user on the device page opens a chat window for whoever is signed in. See The tray app.

In the console, tray chats show Device, with the computer, who is signed in and Remote in. The person sees all their earlier chats from the same computer and account.