HomeAdmin ManualCustomizing HelpSpotWidget Tab Setup

6.9. Widget Tab Setup

The widget tab allows you to gather questions/feedback from any page on your website or even multiple websites. With just a few lines of javascript the tab can be included on any web page.

The widget is completely configurable for seamless integration with your website, even the image used for the tab itself can be changed.

Basic Setup:

<style type="text/css">@import url('http://www.YOURDOMAIN.com/helpdesk/widgets/widgets.css');</style>
<script type="text/javascript" src="http://www.YOURDOMAIN.com/helpdesk/widgets/widgets.js"></script>
<script type="text/javascript">
HelpSpotWidget.Tab.show({ 
	// Nearly every aspect of the widget is customizable, complete documentation here:
	// http://www.helpspot.com/helpdesk/index.php?pg=kb.page&id=323
	host: 'http://www.YOURDOMAIN.com/helpdesk'
});
</script>

Where to Place the Code:

The inclusion code should be placed on every page where you want the tab to appear. For performance it's best to place the code at the bottom of your HTML page just inside the closing </body> tag.

Complete Example:

This example shows every configuration option in use.

<style type="text/css">@import url('http://www.YOURDOMAIN.com/helpdesk/widgets/widgets.css');</style>
<script type="text/javascript" src="http://www.YOURDOMAIN.com/helpdesk/widgets/widgets.js"></script>
<script type="text/javascript">
HelpSpotWidget.Tab.show({ 
	host: 'http://www.YOURDOMAIN.com/helpdesk',
	alignment: 'left',
	tabtype: 'questions',
	tabtype_custom_img: '',
	top: '30%',
	width: 600, 
	color: 'white',
	background_color: '#222222',
	hover_color: '#222222',
	popup_background_color: '#fff',
	popup_border_color: '#ccc',
	popup_border_size: '10px',
	overlay_color: '#000',
	default_note: '',
	default_name: '',
	default_email: '',
	use_field_name: true,
	text_header: 'How can we help?',
	text_intro: 'Submit your question/comment for a member of our team.',
	text_note: 'Question',
	text_note_er: 'Please provide some information on your request',
	text_email: 'Your Email',
	text_email_er: 'Please provide your email address',
	text_name: 'Your Name',
	text_name_er: 'Please provide your name',
	text_submit: 'Submit',
	text_msg_submit: 'Message sent, thank you.',
	text_msg_submit_error: 'Sorry, there was an error.',
	text_msg_submit_error_link: 'Please try this form',
	text_msg_submit_error_url: 'http://www.YOURDOMAIN.com/helpdesk',
	text_loading: 'Loading...',
	text_special: ''
	//,onLoad: function(){ alert('open'); },
	//onClose: function(){ alert('close'); }
});
</script>

CSS Customizations:

The options above allow you to control the look of the tab, but the form itself can be customized via CSS. To do so put a file named widget_tab.css inside your /custom_code folder. If the system detects this file it will include it on the tabs form page automatically.

Option Descriptions:

host The root URL of your HelpSpot installation
alignment The tab can be aligned left or right on the page
tabtype Image that's shown in the tab. Options are: questions, contact, support, feedback, help
tabtype_custom_img Full URL to an image to use for the tab other than one of the defaults
top % or PX for how far from the top of the screen the tab should be positioned
width How wide the popup window will be
color Color of the tab image to use: white or black
background_color Background color of the tab
hover_color Color used when the tab is hovered over
popup_background_color Color for the background of the popup box
popup_border_color: Color used in the popup box border
popup_border_size Thickness of the popup border
overlay_color Color of the background overlay behind the popup
default_note Text to be inserted in the note field by default
default_name Text to be inserted in the name field by default (if being used)
default_email Text to be inserted in the email field by default
use_field_name Show the name field to be filled in by the visitor (true/false), defaults to false
text_header Large text shown at top of popup
text_intro Subheading text
text_note Label for the note field
text_note_er Error text when the note field is not filled in
text_email Label for the email field
text_email_er Error text when the email field is not filled in
text_name Label for the name field
text_name_er Error text when the name field is not filled in
text_submit Submit button text
text_msg_submit Shown when a request is successfully submitted
text_msg_submit_error Shown if there is an error sending in the request
text_msg_submit_error_link When there is an error a link is provided to a secondary form to try (if an error link URL is set)
text_msg_submit_error_url URL to link to if an error occurs when submitting the request from the tab
text_loading Text to use while the widget loads
text_special Text that sits below the text_intro which has a special style applied. Good for unique notes or temporary messages.
onLoad A javascript function that will executed when the popup box opens
onClose A javascript function that will be executed after the popup closes

Knowledge Tags

This page was: Helpful | Not Helpful