Adding the widget to your website

Embed the help desk's widget into your own website.

The widget allows your users to navigate articles and have a chat with your support team without leaving your website. The integration is easy and can be customized with custom colors and text.

The widget is still under active development, which means new features and enhancements are added constantly.

What you will need

Before embedding the widget into your own website, you will need the following:

• The account ID. For new installation with only one account, the id is 1.
• The site ID you plan to use with the widget. To get the ID, simply go to Sites, then click over a site name. You will see the site ID in the URL, for example [...]/sites/1
• The Chat Key. It can be found in the .env file under the PUSHER_APP_KEY config key. The value of PUSHER_APP_KEY works for both, Pusher and the built-in web sockets server; just copy and paste it as described below.

Embedding the widget

Place the following code before the </body> tag on your website:

<script>
    window.dataLayer = window.dataLayer || [];

    function FullHelp() {
        dataLayer.push(arguments);
    }

    FullHelp('init', {
        account: ACCOUNT_ID,
        site: SITE_ID,
        chat: {
            key: 'chat_key',
            broadcaster: 'pusher', // If you are using the built-in WebSockets, use 'builtin'
            port: 6001, // default
            encrypted: true // true if using SSL, false otherwise (default)
        }
    });

    FullHelp('suggest', [3, 2]); // optional - suggested article IDs 
</script>
<script async src="YOUR_SYSTEM_URL_HERE/js/embed.fullhelp.js"></script>

Make sure to replace ACCOUNT_ID, SITE_ID and chat_key with your Full Help values. Also, replace YOUR_SYSTEM_URL_HERE with the URL of your help desk (not the knowledge base URL), make sure to add either http:// or https:// depending on the http protocol you are using.

How do I configure the widget's recommended articles?

To show the users a list of recommended articles, simply pass an array of article id to the suggest widget method. For example:

FullHelp('suggest', [3, 20, 30])

How to translate or change the widget colors?

Use the following code to configure your widget as needed. These values are the widget's defaults. If you only need to configure 1 value, feel free to remove the others.

The locale parameter is used in the API endpoints, for example, if you have articles in Spanish and you pass 'es' as the widget's locale, Spanish articles will be returned.

FullHelp('config', {
    color: '#4e148c',
    linksColor: null,
    textColor: '#ffffff',
    locale: 'en',
    useIcon: false,
    iconUrl: '/svg/message-square.svg',
    iconWidth: 'auto',
    iconHeight: 'auto',
    translations: {
        title: 'Help Center',
        newConversationSectionTitle: 'Start a conversation',
        existingConversationSectionTitle: 'Conversation',
        toggleButtonLabel: 'Need help?',
        customerInteractionName: 'You',
        getInTouchButtonLabel: 'Get in touch',
        startConversationButtonLabel: 'Start a conversation',
        recentConversationsSectionLabel: 'Recent conversations',
        suggestedArticlesSectionLabel: 'Suggested articles',
        searchInputPlaceholder: 'Search for help',
        contactSectionSubtitle: 'We usually reply in a few hours',
        contactNameInputPlaceholder: 'Name',
        contactSubjectInputPlaceholder: 'Subject',
        contactEmailInputPlaceholder: 'Email address',
        contactMessageInputPlaceholder: 'How can we help?',
        contactSubmitButtonLabel: 'Send message',
        chatMessageInputPlaceholder: 'Start typing...',
        backButtonLabel: 'Back',
        noSearchResults: 'No results',
        noSearchResultsHints: 'Sorry, no results for your search. <br> Try a broader term, or get in touch.'
    }
})

Prefill widget contact form

FullHelp('prefill', {
    name: 'Jane Doe',
    email: '[email protected]',
    subject: 'Login problem',
    message: 'Hi there. I have a problem with login. Can you help?'
})