Contact Support Widget

If you want to collect customer service requests on your website or web product, you can use our simple contact form. It is easy to set up, can be modified to certain requirements, and works on desktop, tablets and mobile devices.

How do I place the 'Contact Support' Widget on my website?

After logging in as an Admin on your ticketing page,

1. Click on 'Admin' link in the top left of the screen
2. Select the 'Widget' tab in the left-side menu
3. Select the email address, position and language and copy the code
4. Put it in your webpage below the tag (or the location you prefer)

How do I hide the default launcher and load the widget on clicking a link?

If you don't want to use our default launcher, you can edit the code as follows:

var hive = new SupportBeeHive({ company: 'muziboodemo' });
hive.init({
    widget: 'contact',
    forwarding_address_id: 314,
    // Add this to your code
    launcher: {
        hidden: true
    }
});

Then, on your webpage, put up a link with the text that you want:

<a data-controls-modal="sb-overlay">Contact Us</a>

Note the data-controls-modal attribute. It binds the contact form to this link. You can have as many links in your HTML as you wish.

How do I pre-fill the Name/Email/Subject field?

If you already know the name or email address of your customer (for example when they are already signed in), you can prefill the contact form with these details. Edit the code to add one or more of these fields when you initialize the form:

var hive = new SupportBeeHive({ company: 'muziboodemo' });
hive.init({
    widget: 'contact',
    forwarding_address_id: 314,
    // Add this to your code
    defaults: {
        requester_name: 'Customer Name',
        requester_email: 'Customer Email',
        subject: 'Default subject',
    }
});

Click here for trying out a test widget and reading the full documentation of our widget. Click Change View > Editor View to see the full code.

How can I add captcha to my widget?

After logging in as an Admin on your ticketing page,

1. Click on 'Admin' link in the top left of the screen
2. Select the 'Widget' tab in the left-side menu
3. Set the ‘Show captcha’ option to ‘yes’

A captcha will be automatically added to your widget.

Can I embed the form on my page without using the overlay?

Absolutely! You can use the iframe version. Please use the code below and replace your-subdomainwith your company's SupportBee subdomain. You can also replace the locale with another supported locale. (Check the widget page using the instructions above to find a list of supported locales)

<iframe src="https://your-subdomain.supportbee.com/web_tickets/new?embed=true&locale=en" />

Can I add captcha to the iframe version of the contact form?

Definitely. You can do this by passing an additional parameter called captcha to your form link and setting it to true. Please use the code below and replace your-subdomain with your company's SupportBee subdomain.

<iframe src="https://your-subdomain.supportbee.com/web_tickets/new?embed=true&locale=en&captcha=true" />

Can I add a forwarding address to the iframe version of the contact form?

Yes, you can pass an additional parameter called  ticket[forwarding_address_id]and give it the id of the forwarding address you choose to use. You can find the id of the forwarding address in Admin > Emails listed next to the email address. 

<iframe src="https://your-subdomain.supportbee.com/web_tickets/new?embed=true&locale=en&captcha=true&ticket[forwarding_address_id]=id" />

Can I change the color of the contact widget?

Yes you can customize the color. All the available options for customization for the widget are mentioned under 'Configuration' in this code example: https://codepen.io/josuemontano/pen/EroaBN 

Are there any more customization options available for the contact support widget?

Our support widget does not currently offer other customizable fields. However there are other options like using the SupportBee integration with Formcrafts. 

The integration is easy to setup, with several additional options and customizations for your Contact Support form. Here's a step-by-step tutorial for using Formcrafts with SupportBee. Contact us for any assistance with setting up the integration.