Add an Email Form to your Website

Last Updated -

Overview

With the Desk.com Email Widget, you can add an email button anywhere on your own existing website. For help with the Contact Us form in your Desk.com Support Center, check out this article instead.
 

Adding the Email Widget to your Website

Adding the email widget to your website will allow your customers to click on a button on your website, which then launches the Desk.com email widget in a lightbox or a new window.

1. First you need to get your email widget code. Login to your Desk.com Admin Panel and navigate to: Channels > EmailWidgetsEmbed Code
 


2. A popup window will open that contains the widget embed code which you will need to embed in your own website
 

3. Copy & paste this email widget code from your Admin Panel and place in your website where you want the email button to appear.

Note: If you're placing the widget code on a page that already contains the jQuery framework, you may need to make a few small adjustments.

Just copy the widget code into your website and customers will be able to open support cases from anywhere you'd like across your website.

 

Getting Creative with the Email Widget

To create your own email widget templates, simply click Add Theme from the email widgets section of your Admin Panel.

Note: Before you start editing or adding a new Email Widget theme, you first need to have scripting enabled (whitelisted) for your Desk site. To do this, email support@desk.com and request scripting enablement for your site.
 


You can customize the appearance of your email widget by creating custom "New Email Form" and "Confirmation Screen" themes. Make sure you're choosing the appropriate "Type" from the drop-down menu:


Through the templates you can change the style and logos presented on the form. The "New Email Form" template is the form that collects information such as a customer's name, email address, and message. The "Confirmation Screen" template is the message shown to the customer after their form has been sent, such as "Thanks for the feedback!".

You can toggle the form and email interface to launch in either a "lightbox" or in a new browser window, with the default being a lightbox. To change it to open in a new window, alter the value of displayMode from 1 to 0.


You can also change the width and the height of a widget opening in a new window by adding in the necessary variables, right above displayMode: popupWidth: 380, popupHeight: 450,.

To make cosmetic changes to a lightbox, you'll need to make edits to the dimensions and any desired parameters. In this example, we've set the lightbox width to 400px, and aligned it to the left by 100px. 
 

<style>
    div.fancybox-wrap.fancybox-default.fancybox-opened {
        width:460px !important;
        left:100px !important;
    }
    
        .fancybox-outer {
        width:400px !important;
    }
        .fancybox-inner {
        width:400px !important;
    }
 </style>

In addition to cosmetic changes, you can add fields to collect additional information that can populate the case or customer record. In particular, you can collect data for the following fields:
  • Ticket (These are the case fields)
    • {{ ticket_desc }}
    • {{ ticket_priority }}
    • {{ ticket_subject }}
    • {{ ticket.labels_new }} (this will give you the value of any currently added labels - you can add a label by adding the url parameter ticket[labels_new] if the ability to create new labels is enabled in your Desk.com site)
    • {{ ticket_custom_keyname }} (by custom field key)
  • Interaction
    • {{ interaction_email }}
    • {{ interaction_name }}
  • Email
    • {{ email_subject }}
    • {{ email_body }}
  • Customer
    • {{ customer_company }}
    • {{ customer_desc }}
    • {{ customer_first_name }}
    • {{ customer_last_name }}
    • {{ customer_title }}
    • {{ customer_desc }}
    • {{ customer_custom_keyname }} (by custom field key)


Once you have modified the themes, you can configure the system to use them by marking each respective one as the Default. Accomplish this by clicking the "Default" button for the theme you want to use. The Email Widget code will automatically use the theme you have designated as Default.

 

Adding Custom Fields to your Email Widget

In this example, we will add a custom field to the email widget. Similar concepts apply to using built-in fields. Please read this article for instructions on how to create a Custom field.

1. Edit your Email Widget to include your Custom Customer field by using code similar to this in the Body section:

<!----------Begin Case Custom Fields-------->
<div class="input">
<span class="form_label">Custom Case Field:</span>
{{ ticket_custom_keyname }}
</div>
<!----------End Case Custom Fields
-------->

<!----------Begin Customer Custom Fields-------->
<div class="input">
<span class="form_label">Custom Customer Field:</span>
{{ customer_custom_keyname }}
</div>
<!----------End Customer Custom Fields
-------->

2. Save the updated theme.

3. Load the Email Widget in your browser. You should see the custom fields.

4. Submit the form.

5. As an Agent, open the case and switch to the Customer tab. You should see your Custom fields, populated with the data you've submitted.

If you want to go beyond this and modify the look of these fields you will need to View Source on the Widget page that is showing your Custom fields. Find the section of code that has your fields and copy/paste it into your template, overwriting the code you added in steps 1-3. Make the necessary style changes and save the template. This will allow greater flexibility in changing the appearance of the form, but it requires some manual coding and styling.

You can pass data from your website to the form using query string variables or by posting the values to the form. Custom fields need to be embedded on the email form when trying to pass in a value (can be hidden from user). The following fields can be passed:

  • Ticket (These are the case fields)
    • ticket[desc]
    • ticket[priority]
    • ticket[subject]
    • ticket[labels_new]
    • ticket[custom_keyname] (by custom field key)
  • Interaction
    • interaction[email] (Customer primary email address)
    • interaction[phone]
    • interaction[name]
  • Email
    • email[subject]
    • email[body]
  • Customer
    • customer[company]
    • customer[desc
    • customer[first_name]
    • customer[last_name]
    • customer[title]
    • customer[desc]
    • customer[custom_keyname] (by custom field key)


Example URL:

	https://support.desk.com/customer/widget/emails/new?ticket[custom_ID]=198006&interaction[email]=joe@aol.com

Substitute your own domain name in place of "support.desk.com" in the above example.  

By default, Desk.com will display its email widget as a button. If you would rather display a form inline on your webpages, you can do so with an IFRAME.


Example code:

	<iframe src ="https://support.desk.com/customer/widget/emails/new"width="350" height="450"
border="0" scrolling="no"></iframe>

Substitute your own domain name in place of "support.desk.com" in the above example.

Note: If your form isn't displaying on your site, it's possible that you'll need to toggle on a setting in your Desk site.

Head to AdminChannelsSupport CenterAdvanced Settings

Toggle the "Allow iFrame Embedding" option to On and you should be all set. That'll set the X-Frame-Origins correctly and display the widget properly on a domain other than your Desk domain.

Related Articles

Interested in a helpdesk solution for your business?

Contact us to learn more

Contact Us