Embed a Web Form in Glad App

Embed a web form (via iframe) in Glad App for a website or non-native mobile apps employing tools like Jotform and Formstack through the Chat Unavailable Message text box. For example, you can embed a form to collect a Customer’s name, contact information, and message if chat is currently unavailable so you can reach out to them when you’re available.

How form entries are received #

This depends on how the form is configured. It may be configured to receive the form details via email in Gladly or outside of Gladly. In most cases, it’s best to receive this information in Gladly so details like a Customer’s email address or phone number can be matched with a Profile in Gladly when the form is submitted. If the form is configured to send the form data as an email and it sets the Customer email address in the reply-to header, the data is sent to your email endpoint (i.e., [email protected], not [email protected]). Then, it maps to the correct Customer Profile when it comes in ([email protected] being already configured as an endpoint in Gladly).

If you set the Reply-To header as NAME <email@emailcom>, the name will come into the Profile for a new Customer, along with the email. If there’s not a match, a new Customer Profile is created. If you set it as [email protected], the name will not come in, but the email will still be in the Customer’s Profile on Gladly. Please inquire with your form provider to find out what they support.

Create a form #

Create the form using your desired web form tool, such as Jotform and Formstack. Make sure the form is publicly accessible from any browser. Once created, you’ll need to create an iframe for the form.

Create iframe #

A form is accessible in Glad App using the <iframe> tag, and your code may look like this:

<div style="width: 100% !important; height: 500px !important;">
<h3>Sorry we missed you!</h3><iframe src="https://form.jotform.com/220186080477153" style="width: 100%; height: 400px !important;"></iframe></div>

In the sample code above, the URL “https://form.jotform.com/220186080477153” is the source URL to access the form.

Next, you’ll need to embed the iframe code to Glad App.

Embed form in Glad App #

1. Click on the top left corner of the screen.
2. Click Settings.
3. Under the Channels category, click Glad App. The Glad App page will show you a list of Glad Apps you currently have.
4. Hover over the Glad App you want to edit, click , then select Configure.
5. Scroll down to the Text section and find the Chat Unavailable Message field.
6. Add your iframe in the Message text box. The iframe code can be the entire contents of that message. It can be embedded among other HTML tags or a plain text message.
   

Message with form and HTML tag	Message with HTML tag and no form
	<img class="wp-image-9581" style="" src="https://connect.gladly.com/wp-content/uploads/2023/04/Standard.png" alt="Standard">