Appointment Router Salesforce.com Web- to- Lead Integration Guide Date: January 19, 2011
Overview This document describes the method used to integrate Salesforce.com Web-to-Lead forms with TimeTrade s Appointment Router. TimeTrade s Appointment Router uses the fields on your Web-to-Lead form to automatically determine which sales person is appropriate for this prospect. This document walks you through the steps to integrate Salesforce.com Web-to-Lead forms with TimeTrade s Appointment Router. It is assumed that the reader of this document is proficient with the use of Salesforce.com setup and customization, Web-to-Lead functionality, and basic HTML. It is also assumed that the user knows how to configure TimeTrade s Appointment Router (see Appointment Router Configuration Guide for an overview of how to configure the Appointment Router). For the integration to function, you will need to create two web pages. The first will contain your Web-to-Lead form and the second will contain the TimeTrade Appointment Widget. This document shows you how to use the embed code available in the Admin->Routing section of the TimeTrade product to pass the data collected by your Salesforce.com Web-to-Lead form to TimeTrade. TimeTrade uses this data to automatically direct your prospect/customer to the appropriate representative in your company and allows them to easily make an appointment for a phone call or meeting. The example in this document assumes that you want your prospects to book an appointment for a 15-minute phone call with one of your sales people after they have filled in the information on the following form. Salesforce Web- to- Lead Integration Guide - February 4, 2011 Page 2
After a prospect has entered all the information on this form and clicks Submit, the form values for all the form fields will be passed to Salesforce.com. We will set up a Salesforce.com redirect URL to pass these parameters on to the page hosting the TimeTrade Appointment Widget. This redirect URL will have the form: http://www.company.com/lp2.html?firstname=john&lastname=smith&email=jsmith@company.com&company= mycompany&phone=9785551212&state=ma&revenue= over 100 million When Salesforce.com has completed processing, it will invoke the page hosting the TimeTrade Appointment Widget, passing the input parameters. The page hosting the TimeTrade Appointment Widget will run the TimeTrade Appointment Widget in an iframe. The TimeTrade Widget will then provide the screens to complete the appointment booking process. The remainder of this document will show you the detail steps for creating both the web page hosting the Salesforce Web-to-Lead form and the web page hosting the TimeTrade Appointment Widget. As an administrator on both your TimeTrade and Salesforce.com accounts, you will: 1. Configure the TimeTrade Appointment Router with custom fields and routing rules for 15 minute phone call appointments (see Appointment Router Configuration Guide). 2. Create the Salesforce.com Web-to-Lead form so that it can redirect to a TimeTrade Appointment Widget host page. 3. Create a Web-to-Lead form host page. 4. Create a TimeTrade Appointment Widget host page. 5. Add HTML embed code to the Web-to-Lead form host page. 6. Add HTML embed code to the TimeTrade Appointment Widget host page. STEP 1: Configure the Appointment Router Start by logging in to your TimeTrade account. Configure the Appointment Router as described in Appointment Router Configuration Guide. On the Salesforce Web-to-Lead form, only State and Revenue will be used to route appointments to the appropriate sales rep for this example. The remaining fields are used for lead capture by Salesforce Web- to- Lead Integration Guide - February 4, 2011 Page 3
Salesforce and are informational only for TimeTrade. Consequently, you will need to create only two custom fields in TimeTrade, State and Revenue. NOTE: Consistent naming of fields in Salesforce.com and TimeTrade is critical to a successful integration. This is necessary in order for the data to pass correctly between the two systems. Because of this name match dependency, your custom field names in TimeTrade MUST match the field names in Salesforce.com EXACTLY, including case sensitivity. Because Salesforce.com assigns unique identifiers to each custom field, TimeTrade fields must have the same name as the field label defined on the custom field in Salesforce.com Our example has the following field names: Field Label Salesforce.com Field Name TimeTrade Field Name First Name first_name first_name Last Name last_name last_name Email Address email email Company Name company company Phone Number phone phone State state state Revenue* Revenue* Revenue Note: Only the State and Revenue fields need to be created in TimeTrade. Fields marked with * above are Salesforce.com custom fields. Values under the Salesforce.com Field Name column actually indicate the field label defined in Salesforce.com as opposed to the actual HTML ID the Web-to-Lead wizard will generate. STEP 2: Create the Salesforce Web- to- Lead form 1. In Salesforce, navigate to Setup -> App Setup -> Customize -> Leads -> Web-to-Lead 2. If disabled, be sure to enable Web-to-Lead functionality. Refer to the Salesforce.com documentation for instructions and best practices for enabling Web-to-Lead. 3. Once Web-to-Lead is enabled, click the Create Web-to-Lead Form button 4. From the Available Fields list, select the field(s) required on the new Web-to-Lead form. Once the field(s) have been selected, click the right-arrow button to add the field to the Selected Fields list on the right. 5. By default, Salesforce.com will automatically add First Name, Last Name, Email, Company, City and State/Province to the Selected Fields list. To remove a field, select the field and click the left-arrow. 6. Once the list of selected fields is complete, you can rearrange their order of appearance by selecting a field and clicking the Up or Down arrow button. Salesforce Web- to- Lead Integration Guide - February 4, 2011 Page 4
7. Enter the Return URL the user should be directed to once the form is submitted to Salesforce.com. For the example in this document, the Return URL will be http://www.mycompany.com/make_appt.html. 8. Click the Generate button to create the HTML for the new form. 9. Copy the HTML and paste into a new form on your web site. The Web-to-Lead wizard will automatically add a field returl to the form. This field will contain the URL to which the form will be directed after the lead is submitted to Salesforce.com. In this case, the form will be redirected to the TimeTrade Appointment router. NOTE: The HTML Field Name for State (a standard Salesforce.com field) and the HTML title for Revenue (a custom Salesforce.com field) on your Web-to-Lead form MUST match the field names in TimeTrade EXACTLY, including case sensitivity. STEP 3: Add form field values to the Salesforce.com form It is important that the values you allow your prospects to pick for State and Revenue on the Salesforce.com form map exactly to the values you have configured in the TimeTrade Appointment Router. To simplify this process, TimeTrade will provide the exact values and names to define in the Salesforce.com field definition list used for each field. In your TimeTrade system, navigate to Admin > Routing > Landing Pages. Select the row with the Salesforce.com routing rule and click Get Widget. View the Salesforce.com embed code by clicking on the Salesforce.com tab on the left side of the page. Salesforce Web- to- Lead Integration Guide - February 4, 2011 Page 5
Under Drop-down list values for your Salesforce form, you will see the values for both the State and Revenue fields. The values listed are a comma separated list of values. Return to your Salesforce.com system and ensure that these form field values are identical on your Web-to-Lead form. If the field being used is pre-existing, you can edit the picklist field list to include the list of values from TimeTrade. Repeat the same steps for the Revenue field. Salesforce Web- to- Lead Integration Guide - February 4, 2011 Page 6
STEP 4: Create the web page which hosts the Salesforce.com form Copy the HTML generated by the Web-to-Lead wizard and add it to a new or pre-existing page on your web site. Deploy the URL for this web page. Make note of the URL, you will need it in a later step. STEP 5: Create the host web page for the TimeTrade Appointment Widget Create a new web page that will host the TimeTrade Appointment Widget. We will add the TimeTrade Widget to this page later. For now, deploy the page without the TimeTrade Widget. Make note of the URL for this page. You will need it in the next step. STEP 6: Generate the HTML embed code In order for Salesforce.com to redirect to TimeTrade correctly, the returl field value must be updated dynamically as the prospect specifies values for State, Revenue and other fields. TimeTrade provides you with HTML embed code that does this. Return to the Get Widget page for Salesforce.com in your TimeTrade system and enter the URLs for: The web page which hosts the Salesforce Web-to-Lead form The web page with hosts the TimeTrade Appointment Widget Click the Generate Code button. TimeTrade will automatically read the Salesforce.com host page and ensure that the State and Revenue fields are identical in both TimeTrade and Salesforce.com. You will receive an error message if they are not the same or if either State or Revenue is missing from your Salesforce.com form. TimeTrade will also check that the page that will host the Appointment Widget exists. You will get an error message if the page cannot be accessed. When both the Salesforce.com Web-to-Lead hosting page and the TimeTrade Appointment Widget host page have been validated, TimeTrade will generate the embed code for both pages. Salesforce Web- to- Lead Integration Guide - February 4, 2011 Page 7
STEP 7: Add the TimeTrade embed code to the Salesforce.com form host page Copy the TimeTrade embed code for the Salesforce.com form host page. Open the web page hosting the Salesforce.com form and paste the TimeTrade embed code immediately after the <form> tag. Salesforce Web- to- Lead Integration Guide - February 4, 2011 Page 8
Save and deploy the Salesforce Web-to-Lead form host page. STEP 8: Add the TimeTrade embed code to the Appointment Widget host page Return to your TimeTrade system and copy the embed code for the TimeTrade Appointment Widget. Salesforce Web- to- Lead Integration Guide - February 4, 2011 Page 9
Paste this embed code into the page which will host the TimeTrade Appointment Widget. If there is other content on this web page, you can control where the TimeTrade Widget appears by carefully selecting where you insert the embed code. This TimeTrade embed code parses the input parameters passed when Salesforce.com invokes the URL for the page and then launches the TimeTrade Appointment Widget in an iframe. Deploy this updated version of the web page. That s it! Your Salesforce.com Web-to-Lead integration is now configured and ready for use. Visit support.timetrade.com for more help and information Salesforce Web- to- Lead Integration Guide - February 4, 2011 Page 10