Using trakdesk Web Widget to embed customer support on your website

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.

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.

  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.Before 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.
• 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.

  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.Now, add the following code and configure it with your custom fields identifier to auto select or pre-fill custom ticket fields. 

  "inputFieldsData": {
       "ticket_priority": "1",
       "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 section. 
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
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.