Home → Admin Manual → Customizing HelpSpot → Widget Tab Setup

5.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

Widget Tab  /