If you do not want to use the standard embed or inline chat box, you can call a chat window from any text or button on your website.

There are some key steps to achieve this :

1. Add the widget code to your site just before the closing < / body > tag
2. Add custom txt or an image to your server with the click event.
3. Modify the widget behavior, so that it "Hides widget on load" (optional)
4. Display a custom image or text based on your status (optional)

Please follow these steps :

Step 1 - Copy the Widget code
1. Login to the dashboard
2. Go to "Admin" section at the bottom of the left-hand sidebar.
3. Choose the Site from Properties Menu (if you have more than 1 site).

4. Select "Chat Widget" option in the menu
5. Hover the cursor to the Widget Code section. Select "Copy to Clipboard" to copy the code.

5. Paste the widget code into your website HTML just before < / body >
6. Refresh your website to ensure you see the widget.

Step 2 - Create button or text on your site
Create a button or text and add the following code before it:
For a text link use :
<a href="javascript:void(Tawk_API.toggle())"> Click to Chat </a>
For an image use :
<a href="javascript:void(Tawk_API.toggle())"> <img src="/path/to/img"> </a>
Step 3 - Hide widget on load, and pop out
1. Login to the dashboard
2. Go to Admin Section at the bottom of the left-hand sidebar.
3. Select the Property from the dropdown menu (if you have more than 1 site)
4. Click Chat Widgetoption.
5. Look for the "Widget Behaviour - Visibility Settings"
5. Switch on Hide widget on load to hide the widget before it is clicked

Step 4 - Display a custom image or text based on your status
If you followed Steps 1 through 3, you should now have an image or text on your site that pops out the chat when clicked, and is hidden.

An advanced option is to show different images based on the status of your widget. Eg: Offline, show an offline image, Online, show an online image.
1. Add this div code in to your website's HTML in the position where you would like the button or text to displayed. You do not need to add anything inside the div, just copy and paste it exactly as is.
<div id="status"></div>
2. Add and modify this code with your custom images and text, and place it just before the < / body > tag.

Click Here for a working example of a text based status code.
<!--Start of tawk.to Status Code-->

<script type="text/javascript">
Tawk_API = Tawk_API || {};
Tawk_API.onStatusChange = function (status){
if(status === 'online')
document.getElementById('status').innerHTML = '<a href="javascript:void(Tawk_API.toggle())">Online - Click to chat</a>';
else if(status === 'away')
document.getElementById('status').innerHTML = 'We are currently away';
else if(status === 'offline')
document.getElementById('status').innerHTML = 'Live chat is Offline';

<!--End of tawk.to Status Code -->
Hire Chat Agents completely free on a 7 day trial - No obligation

- No payment needed, just a completely free 7 day trial!