Using Contact Forms

Table of contents

To collect customer service requests on your website, you can use our simple contact form. It is easy to set up, customizable, and works on desktop, tablets and mobile devices.

After logging in as an Admin on your ticketing page,

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

Hiding the launcher and opening on a link click

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.

Pre-filling form fields

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',
  },
});

After logging in as an Admin on your ticketing page,

Click on Admin in the top left of the screen
Select the Widget tab in the left-side menu
Set the Show captcha option to yes

A captcha will be automatically added to your widget.

Embedding an iframe version

Yes. You can use the iframe version. Replace your-subdomain with 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" />

Adding captcha to the iframe version

Yes. Pass an additional parameter called captcha and set it to true. 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" />

Adding a forwarding address to the iframe version

Yes. 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" />

Yes. All the available customization options are documented in this code example: https://codepen.io/josuemontano/pen/EroaBN

Using third-party form builders

You can use SupportBee with third-party form providers. Set them up to:

Send an email on submission to your support address (the one you set up in SupportBee)
Include the customer's email in the Reply-To field of the email

Reply-To is a standard field in email, built for sending the reply to an email address distinct from the "From" email. When we import the ticket, we create a ticket for the customer referenced by the Reply-To email.