1. Install FS script
Place before the </head> tag on all of your website pages, and before any Google scripts..
<!-- FS Required: --> <script src="https://app.funnelscience.com/script/fs-forms-and-phone-tracking-js/FSJavaScriptTools.php?site=XXX"></script>
2. Integrate forms code
Wherever you would like your FS Forms to display on your site, you will need a wrapper <div> element like so:
<div data-fs-form-id="YY"></div>
3. Integrate phone tracking
Inline Phone Display Code
Replace every inline phone number with the following code snippet:
<span class="fs-phone-route" data-phone-route="ZZ">(ZZZ) ZZZ-ZZZZ</span>
Hyperlink Phone Display Code
Replace every hyperlink phone number with the following code snippet:
<a class="fs-phone-route" data-phone-route="ZZ" href="tel:zzzzzzzzzz">(ZZZ) ZZZ-ZZZZ</a>
In this tutorial we’re going to add conversion tracking from Funnel Science conversions to Google and Microsoft Ads services.
- Navigate to Settings -> Integrations
- Leave this page open for reference
- Use the links and goals under “Ad Services Conversion Integration” for the next steps
- Open the account you wish to add conversions to.
- Navigate to Tools and Settings -> Conversions
- Click “New Conversion Action”
- Click “Import”
- Choose “Other Data Sources or CRMs”
- Choose “Track conversions from clicks”
- Caution: NEVER choose “Track conversions from calls.” This will cause you problems.
- Click “Continue”
- Copy the first goal from the Funnel Science Integrations page. Chances are this will be “Call Request,” and we’ll use this as an example.
- Click “Select category,” and choose “Contact”
- Paste the first goal into “Conversion Name” (For example, “Call Request”)
- Select “Use the same value for each conversion,” then enter an estimated dollar value for the conversion
- As a rule of thumb, I usually use $10 for phone calls, $5 for forms and $3 for call requests, SMS, web chats.
- Leave the rest at defaults: Every, 90 days, Data-driven
- Click “Create and continue”
- Leave enhanced conversions unchecked
- Open “Import offline conversions”
- Click “Import from data platform” and choose “Uploads”
- Click “Continue with Google click identifiers”
- Repeat these steps for all goals.
- Note: For forms, it’s a good idea to change the goal category from “Contact” to “Submit Lead Form.”
- Also: Be sure to add goals when creating new phone routes or forms in Funnel Science.
- When you are finished adding goals, click “Uploads” in the left navigation
- Click “Schedules” at the top and click the blue plus to schedule an upload.
- Click “Select source” and choose “HTTPS”
- Copy the Google link from the Integrations page in Funnel Science
- Paste this link in “Source URL”
- Click “Select frequency” and choose “Every 24 hours”
- Click “Select time” and choose an hour best suited for the client. Usually close of business, 5:00pm for example.
- Note: Spreading this time around will help keep the load off of the Funnel Science server. Use your best judgement.
- Click “Save & Preview”
- Click “Ok”
- Note: The first time you do this will result in errors. It takes several hours for Google Ads to recognize your new goals.
- Navigate to Tools -> Conversion Goals
- Choose “Offline”
- Click “Next”
- As with Google Ads, choose “Contact” for “Submit lead form,” depending on the goal
- Click the hard-to-see, “Offline conversions” box under Goal Type.
- Click “Next”
- Copy the first goal from the Funnel Science Integrations page and paste this in the “Name” field
- Click “Select a value” and choose “Each conversion action has the same value.”
- Set the conversion value as described for Google Ads
- Change “Conversion window” to 90 days
- Be sure “Include in Conversions” is set to Yes
- Click “Save and next” then click “Done”
- Repeat for all goals
- When finished, navigate to Tools -> Offline Conversions
- Click “Schedules,” then click the “+ Schedule” button
- Copy the Bing link from the Funnel Science Integrations page (without “https://”)
- Paste the link in the “File URL” field
- Change “Upload Frequency” to “Daily” at “5 PM,” or whatever time you think is appropriate.
- Choose the appropriate “Time zone” for the business
- Click “Save and preview”
- Note: The first time you do this will result in errors. It takes several hours for Microsoft Ads to recognize your new goals.
In this tutorial we’re going to change the Chat Box styling to make the Chat Box purple, and remove the round edges.
First, open a text editor, such as Notepad, as a place to store the changes you’ll be making to your website’s CSS file.
With your site open in either Firefox or Chrome, and with the Chat Box in the open state, right click on the words “Contact Us” in the Chat Box. Choose “Inspect” or “Inspect Element” from the popup menu. A pane should open up with the HTML on the left and the CSS on the right. On the HTML side (Elements or Inspector tab), a SPAN tag with the words “Contact Us” will likely be highlighted.
Above this SPAN tag will be a DIV tag with an ID of “fs-chat-box” and a CLASS of “open.” Click on this DIV tag.
On the CSS side of the pane (Styles or Rules tab), you should see a section with an ID of #fs-chat-box.open. Highlight that text, copy it into your text editor, and place an open curly brace at the end like this:
#fs-chat-box.open {
The next line down on the CSS side is the border:
border: solid 5px #1daa9e;
Edit this line so that it reads:
border: solid 5px #808;
The border of the Chat Box should now be a purple color.
These changes are temporary, and visible only to you until the page is reloaded. You’ll need to store these changes in your open text editor to be added to your website’s main CSS file.
Copy this new line into your text editor, and add the !important modifier to the end, like so:
#fs-chat-box.open {
border: solid 5px #808 !important;
This will ensure that this line of CSS will override the defaults set in the Funnel Science CSS file when you insert this code in your CSS file.
You will be using the !important modifier on every line you change.
Next, change the background to purple and the border-radius to 0 (zero) in the CSS side of the pane:
background: #1daa9e; to background: #808;
border-radius: 10px 10px 0 0; to border-radius: 0;
The background behind “Contact Us” should now be purple, and the whole Chat Box border should be square.
Copy these changes into your text editor and add the !important modifier. Since this is the end of the changes we’ll be making to this section, we’ll also add the closing curly brace:
#fs-chat-box.open {
border: solid 5px #808 !important;
background: #808 !important;
border-radius: 0 !important;
}
Now we’ll change the “CALL NOW” heading. Right click on the “CALL NOW” heading text and click Inspect. The SPAN with the text “CALL NOW” should be highlighted in the HTML side of the pane.
Click on the DIV with a CLASS of “fs-cmh-call selected” a few lines up.
As we did before, we’ll modify the section in the CSS pane,
#fs-chat-box .fs-chat-menu-header div.selected
The only line in it is the background, which we’ll change to a foamy purple, #bfaabf. The CSS in your text editor should be:
#fs-chat-box .fs-chat-menu-header div.selected {
background: #bfaabf !important;
}
Of course, now we can’t read the text as the grey color is too close to our purple. A couple of sections down is the class,
#fs-chat-box .fs-chat-menu-header div
…with a color of #aeaeae. Let’s change that to #fff and add it to our text editor. Just for grins, we’ll make the text a touch larger too:
#fs-chat-box .fs-chat-menu-header div {
color: #fff !important;
font-size: 14px !important;
}
Now that phone icon looks out of place. Let’s get rid of it.
On the HTML side, one line down is the IMG tag for the phone icon. Click on it.
On the CSS side in,
#fs-chat-box .fs-chat-menu-header div img
Click on the word: “middle” in,
vertical-align: middle;
…then press enter. This will start a new line. Type,
display: none;
This will hide the phone icon. In your text editor, you should add:
#fs-chat-box .fs-chat-menu-header div img {
display: none !important;
}
Next, we want to remove the round corners from the input fields. Right click on the “Name” field, and click inspect. You should have the “Name” input field selected on the HTML side. On the CSS side, edit:
.fs-chat-menu-body form > div input, .fs-chat-menu-body form > div button, .fs-chat-menu-body form > div textarea, .fs-chat-menu-body form > div select
…and change:
border-radius: 5px;
to:
border-radius: 0;
You’ll see the rounded corners turn square.
You’ll add:
.fs-chat-menu-body form > div input, .fs-chat-menu-body form > div button, .fs-chat-menu-body form > div textarea, .fs-chat-menu-body form > div select {
border-radius: 0 !important;
}
…to your text editor.
Finally, it’s time to change the “CALL ME” button. Right click on it, and click inspect. On the HTML side, the BUTTON element will be selected. On the CSS side, edit:
#fs-chat-box button
Set the background color to #808, the border-radius to 0, text-transform to capitalize, and the box-shadow to none. You should end up with:
#fs-chat-box button {
background: #808 !important;
border-radius: 0 !important;
text-transform: capitalize !important;
box-shadow: none !important;
}
…in your text editor.
Your completed code should be:
#fs-chat-box.open {
border: solid 5px #808 !important;
background: #808 !important;
border-radius: 0 !important;
}
#fs-chat-box .fs-chat-menu-header div.selected {
background: #bfaabf !important;
}
#fs-chat-box .fs-chat-menu-header div {
color: #fff !important;
font-size: 14px !important;
}
#fs-chat-box .fs-chat-menu-header div img {
display: none !important;
}
.fs-chat-menu-body form > div input, .fs-chat-menu-body form > div button, .fs-chat-menu-body form > div textarea, .fs-chat-menu-body form > div select {
border-radius: 0 !important;
}
#fs-chat-box button {
background: #808 !important;
border-radius: 0 !important;
text-transform: capitalize !important;
box-shadow: none !important;
}
And that’s it! Add the completed code in your text editor to your website’s main CSS file. The end of the file is generally the best place to add it.
Any part of the Chat Box can be edited in the same way as the elements we’ve edited in this tutorial.
For the complete CSS Reference, visit: https://www.w3schools.com/cssref/
#fs-chat-box.open {
border: solid 5px #808 !important;
background: #808 !important;
border-radius: 0 !important;
}
#fs-chat-box .fs-chat-menu-header div.selected {
background: #bfaabf !important;
}
#fs-chat-box .fs-chat-menu-header div {
color: #fff !important;
font-size: 14px !important;
}
#fs-chat-box .fs-chat-menu-header div img {
display: none !important;
}
.fs-chat-menu-body form > div input, .fs-chat-menu-body form > div button, .fs-chat-menu-body form > div textarea, .fs-chat-menu-body form > div select {
border-radius: 0 !important;
}
#fs-chat-box button {
background: #808 !important;
border-radius: 0 !important;
text-transform: capitalize !important;
box-shadow: none !important;
}