Avatar

Anand Lall

Using trakdesk Web Widget to embed customer support on your website

Last updated
Available in
  • Starter
  • Professional
  • Business
  • Enterprise

The Trakdesk Website Widget enabled you to embed support options on your website or customer support portal so customers can get in touch with you without leaving your website. 

The website widget can be configured to your specific needs such as; Appearance and theme, custom buttons, custom ticket fields, custom labels and colors.

Image title

This article covers the following topics:

  • Supported browsers
  • Configuring components and options
  • Integrating with 3rd party chat applications
  • Adding the Website Widget to your website or customer support portal

Supported browsers

The Website Widget is supported on the following browsers as of December 12th 2016.

Desktop browsers

  • Google chrome: 44.0 and greater
  • Microsoft internet explorer: 10 and greater 
  • Mozilla Firefox: 41 and greater
  • Apple Safari: latest version

Mobile browsers

  • Google chrome for Android and IOS: latest version
  • Android browser: latest version
  • IOS safari: latest version

Configuring components and options

You can configure your Website Widget to include the following components:

  • Contact form
    Allow customers to submit support tickets directly from your website. By default, this option is enabled and cannot be disabled. Support tickets will be created with source: Widget.Image title

    You can automatically open the contact form with the following JavaScript snippet:
    Trakdesk.contactForm.open();

    Example:
    <a href="#" onClick="Trakdesk.contactForm.open();">Contact</a>

  • Custom ticket fieldsTrakdesk allows you to capture important data with custom ticket fields. There is no limit as to how many custom fields you can add to the Website Widget contact form.Image titleBefore custom fields are available, you must enable the Visible to customers option in the default ticket form for each custom field. Building your ticket forms.Image title
  • Custom buttons
    You can add custom buttons to your Website Widget. Each button can be configured with its own color, icon, title and URL. You can add up to a maximum of 8 custom buttons.Image title

    You can automatically expand the button list with the following JavaScript snippet:
    Trakdesk.widget.open();

    Example:
    <a href="#" onClick="Trakdesk.widget.open();">Contact</a>

  • File uploadAllow customers to upload an attachment when submitting a support ticket. 

Passing custom CSS to the Website Widget

If you would like to do additional CSS customization besides from using the Trakdesk Website Widget builder interface, you can easily pass custom CSS to the Website Widget.

There are two (2) ways in which you can pass custom CSS to the Website Widget:

  • Load CSS from a remote address 

    css: {
        cssFile: "http://url"
     }

    Example:
    Trakdesk.init({    
        "host": "subdomain.trakdesk.com",    
        "proto": "https", // recommended: https    
        "language": "auto", // trakdesk-supported language code or 'auto'    
        "widget": {        
            "position": "right", // 'left' or 'right'        
            "background": "#5ebfa5",        
            "btns": [{ // widget buttons                           
                "label": "Help Articles",                
                "type": "link",                
                "href": "ARTICLES",               
                "icon": "book",                
                "background": "#5ebfa5"            
            },            
            {                
                "label": "Get in touch",                
                "type": "contactForm",                
                "icon": "envelope",                
                "background": "#5ebfa5"            
            }]    
        },    
        "contactForm": { // form options        
            "title": "Get in touch",        
            "css": {            
                "actionBtn": {                
                    "background": "#5ebfa5"            
                },            
                "cssText": ".selector { color: #000;}", // you can add css as string"
                cssFile": "http://path.to/file.css"    // or pass URL to your css file        
            },        
            "customFields": [ // custom fields to show for widget            
                "ticket_priority",            
                "ticket_type",                       
                "c71"        
            ],        
            "inputFieldsData": { // pre fill inputs with data            
            "c71": "Technical support",            
            "ticket_priority": "Low"        
        },        
        "includeUrl": true, // include current page url        
        "attachment": true // allow uploading of attachment    
        }
    });

    Note:
    Loading your CSS from a slow network can result in delay loading the Website Widget. We recommend uploading and loading your .css file to a CDN.
  • Inline CSS

    css: {   
       cssText: "your css"
    }

    Example:
    Trakdesk.init({    
        "host": "subdomain.trakdesk.com",    
        "proto": "https", // recommended: https    
        "language": "auto", // trakdesk-supported language code or 'auto'    
        "widget": {        
            "position": "right", // 'left' or 'right'        
            "background": "#5ebfa5",        
            "btns": [{ // widget buttons                            
                "label": "Help Articles",                
                "type": "link",                
                "href": "ARTICLES",                
                "icon": "book",                
                "background": "#5ebfa5"            
            },            
            {                
                "label": "Get in touch",                
                "type": "contactForm",                
                "icon": "envelope",                
                "background": "#5ebfa5"            
            }]    
        },    
        "contactForm": { // form options        
            "title": "Get in touch",        
            "css": {            
                "actionBtn": {                
                    "background": "#5ebfa5"            
                },            
                "cssText": ".selector { color: #000;}", // you can add css as string            
                "cssFile": "http://path.to/file.css"    // or pass URL to your css file        
            },        
            "customFields": [ // custom fields to show for widget            
                "ticket_priority",            
                "ticket_type",                       
                "c71"        
            ],        
            "inputFieldsData": { // pre fill inputs with data            
                "c71": "Technical support",            
                "ticket_priority": "Low"        
            },        
            "includeUrl": true, // include current page url        
            "attachment": true // allow uploading of attachment    
        }
    });

Contact Form custom labels

"btnLabels": {
    "sendMsg": "Send Message",
    "attachFile":"Attach a file"
}

Note: Custom labels are not translated and will display as configured.

Passing values to the Website Widget

OnLoad, Trakdesk allows you to pass pre-filled values to fields in the Website Widget contact form.

You can pass values to name, email address and custom ticket fields.

  • Name and Email address

    Trakdesk.setUser({
        name: 'Test User',
        email: 'test@user.com',
        locked: true //Passing locked: true will lock the field and prevent the customer from updating it. 
    });

    Note: If you are integrating the Website Widget with your customer support portal, you do not need to add the User name and Email address parameters because we automatically pass session data "User name and Email address" to the Website Widget.
  • Custom ticket fields
    To add custom fields to the Website Widget contact form, click on the drop down menu, then select the custom fields you would like to add.Image titleNow, add the following code and configure it with your custom fields identifier to auto select or pre-fill custom ticket fields.

    "inputFieldsData": {
        "ticket_priority": "Low",
        "ticket_type": "Question",
        "c71": "Technical support", //Custom field
        "c72": ["Category", "Sub Category", "Option"] //Conditional Dropdown
    }

    Note: Ticket forms are not supported.

Integrating with 3rd party chat applications

Trakdesk allows you to trigger 3rd party chat applications directly from the Website Widget.

Below is a list of supported chat applications and its JavaScript snippet:

  • Tawk
    javascript:window.parent.Tawk_API.toggle();
  • Olark
    javascript:window.parent.olark('api.box.expand');
  • SnapEngage
    javascript:window.parent.SnapEngage.startLink();

In this example, we will demonstrate how to integrate the Website Widget with tawk live chat application.

  1. Login to your helpdesk as an administrator.
  2. Go to the Admin Page.
  3. Select the Widget option.
  4. Click on the Add Button option under the Buttons sectionImage title
  5. Enter a label and JavaScript code.  Additionally, you can drag-and-drop the buttons to any order, select a color scheme and icon for each button.
  6. Once you are done, copy the JavaScript code at the bottom of the page and paste it on your website before the </body> tag. 

Adding the widget to your website or customer support portal

You can add the Website Widget to any page on your website or customer support portal.

The widget is fully optimized for mobile devices. The widget is presented in the end user's language, based on the language setting for each user's browser. However, you can force the widget to display in a specific language. 

To add the widget to your website or customer support portal

  1. Login to your helpdesk as an Administrator
  2. Go to the Admin Page.
  3. Select the Widget option.
  4. Under the HTML Code section, copy the JavaScript code Image title
  5. Add the code before the </body> tag. You need to add the widget on every page you want the widget to appear.
  6. If you want to add the widget to your customer support portal, copy the code and paste it in your customer support portal Theme, footer page. Admin -> Themes -> Locate the theme -> Edit -> Footer -> Edit. Paste the code at the bottom, before the </body> tag. You only need to add the code once, it will automatically appear on each page.
3 of 4 found this helpful

Can you give us your feedback so we can improve this article?

Why you did not find this article helpful?

Have more questions?

Comments(0)

Sign In to post a comment