Installation

The plugin is available from the node and yarn package managers.

# Node
npm install tawk-messenger-svelte

# Yarn
yarn add tawk-messenger-svelte

Quickstart

Import tawk-messenger-svelte into your .svelte component. The propertyId and widgetId will be found on your tawk Dashboard.

Log in to your account and go to Administration > Channels > Chat Widget.

Simple Example

<script>
  import TawkMessengerSvelte from 'tawk-messenger-svelte';
</script>

<TawkMessengerSvelte propertyId="XXXXX" widgetId="XXXXX" />

Advanced Example

In this example we show how to bind and dispatch events to the widget, it uses the Javascript Api to open and close the widget.

Full api documentation: https://developer.tawk.to/jsapi/

<script>
  import TawkMessengerSvelte from 'tawk-messenger-svelte';

  let widget;
  const propertyId = 'XXXXX';
  const widgetId = 'XXXXX';

  const handleLoad = () => {
    alert(`Widget loaded! You can now use the widget API.`);
  };

  const handleOpen = () => {
    widget.maximize();
  };

  const handleClose = () => {
    widget.minimize();
  };
</script>

<button on:click="{handleOpen}">Open</button>

<button on:click="{handleClose}">Close</button>

<TawkMessengerSvelte {propertyId} {widgetId} bind:this="{widget}" on:load="{handleLoad}" />

Documentation

It exposes the same api of the official Tawk Messenger React but ported to Svelte components.

Disclaimer

This is not an official plugin maintained by the Tawk.to team. It is just a useful tool for whoever wants to integrate Tawk with Svelte. I have nothing to do with Tawk.to