Using Contact Forms

SupportBee contact 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 widget on my website?

After logging in as an Admin on your ticketing page,

  1. Click on Admin 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)

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, or subject?

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

How can I add captcha to my widget?

After logging in as an Admin on your ticketing page,

  1. Click on Admin 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?

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

Can I add 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" />

Can I add 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" />

Can I change the color of the contact widget?

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:

  1. Send an email on submission to your support address (the one you set up in SupportBee)
  2. 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.

This is supported by most modern form builders. If you need a recommendation, we like Formcrafts.