Setting up a WhatsApp widget

If you want to let you customers start a WhatsApp conversation with you from your website, this page will show you how to embed our WhatsApp widget.

To add the Cue WhatsApp web widget to your website you can just embed the code below into the web pages you would like to display it on.

Simple embed

The simplest way to add the WhatsApp widget to your website is to:

1. Copy & paste the code below into a text editor.
2. Change the value for number in the code below to your WhatsApp number. The number must be in international country code format without a '+' symbol.
3. Copy & paste the code into the HTML of your website right before the </body> tag.

<script>
window.cueWidgetConfig = {
  channels: {
    whatsapp: {
      number: '447451278958', // Change this to your WhatsApp number
    },
  },
};

var s=document.createElement('script');s.defer='true';s.dataset.cueWidgetWhatsapp='true';s.dataset.cueWidgetScript='true';s.src='https://webchat.cuedesk.com/widget.js';document.body.appendChild(s);
</script>

Extra settings

If you'd like to configure extra settings on the widget, below is an example that shows the full range of options that can be configured WhatsApp web widget.

<script>
  window.cueWidgetConfig = {
    channels: {
      whatsapp: {
        number: '9958610448', // Required - Your WhatsApp Business Number
        message: 'Hi', // Optional - Prepopulate new message text
          },
        },
    content: {
      logo: 'https://media.cuedesk.com/workspaces/ff028dc7-2f96-4319-a209-c20a30e17b95/rLyuvniPEUVcSxfg', // Optional - URL for logo to display on open chat window
      greeting: 'Chat with us', // Optional - Headline greeting
      intro: 'We typically reply in a few minutes.', // Optional - Second line under the headline
        },
      theme: {
        brand: {
          colors: {
            primary: '#5C3DF5', // Optional - Set the primary colour for the widhet. Defaults to WhatsApp green
            background: '#FFFFFF', // Optional - Background colour. Defualt is #FFFFFF
            }
          },
        launcher: {
            logo: 'https://media.cuedesk.com/workspaces/ff028dc7-2f96-4319-a209-c20a30e17b95/rLyuvniPEUVcSxfg', // Optional - override the icon in the launcher button
            backgroundColor: 'green', // Optional - any valid CSS color value for the background color of the launcher button
            alignment: 'right', // default right - possible values - right | left
          },
        },
      };
var s=document.createElement('script');s.defer='true';s.dataset.cueWidgetWhatsapp='true';s.dataset.cueWidgetScript='true';s.src='https://webchat.cuedesk.com/widget.js';document.body.appendChild(s);
</script>