In this first step of setting up Magic Conversation For Gravity Forms, you’ll want to choose some basic settings. You can always return to the settings page to tweak existing settings.

The first thing to do is select a Gravity Form that you’d like to convert to a conversational form. If your existing form contains fields that are not supported by Magic Conversation, you’ll want to modify your existing form, or, create a new form.

The following fields are currently supported:

• Single line text
• Radio Buttons
• Checkboxes
• Multi Select
• Email (you must disable confirmation)
• Phone
• Name
• Paragraph text
• HTML
• Drop Down
• Number
• Hidden
• Date
• Website
• File Upload

Pricing Fields

• Product
• Quantity
• Option
• Shipping
• Total

Post Fields

• Title
• Body
• Excerpt
• Tags
• Category
• Post Image
• Custom Field

After you’ve created a new form, or modified an existing one, select your form from the Settings > Conversation Form > Choose a form

Next, you’ll want to customize the Chat Input Placeholder message. This is the message that users will see in the chat window input field.

You can set the button color for the conversation send button – setting the color here will also automatically set the color for the answer option buttons that are displayed when the user is asked a question from a radio button, checkbox, or multi select form field.

Global Conversation Button is checked by default. Leaving it checked allows the conversational form to be displayed on the bottom right side on each page of your site.

If you want to display the global conversation button on just the home page of your site, you’ll want to check “Show the global conversation button on home page only.”

Notification with welcome message will display a customizable message on top of the conversation button.

You can next select a color for the global conversation button.

Next, you can upload your own custom images for the chat status button.

You can display a conversation header when global conversation button enabled.

Next, add a title for the Conversation Header.

You can then add a subtitle for the conversation header.

Add a Display Name for the Conversation Header if you want.

Enter a welcome message for the Conversation Header.

Next, select a background color for the Conversation Header.

Lastly, you can add your own custom CSS code in the Custom CSS field.

Assign Form Fields for your conversational form by going to Magic Conversation For Gravity Forms > Form Fields from the WordPress dashboard.

Add each of the fields from the form you selected in Step 1 into 
“Add New Form Field” – add a slug for each form field you enter.

The form fields must match the name of the fields in your Gravity Form.

You can add questions from Magic Conversation For Gravity Forms > New Question, or by going to Magic Conversation For Gravity Forms > Questions > Add New

The Questions page displays a lit of your existing questions.

After adding a new question under “Add New Question”, place a check in the corresponding form field located in the Form Fields section on the right side of the page. Click Publish.

You can also add questions from directly within a specific Gravity Form field by adding your question into the “Custom” field under the “Conversation Questions” option. This is also how to add questions when creating a second conversation form.

You can now customize further using the Conversation Style Generator by going to Magic Conversation For Gravity Forms >Conversation Style Generator.

On this page you can select the avatars for both the robot speaking to the user, and for the the user.

You can modify the background color of the chat bubbles and also the font colors.

Under Common Styles, you can modify the line height and font size, the border radius, and the padding.

Save your changes.

You can use Gravity Form’s Confirmation Message Visual Editor with the text option selected to provide feedback to your users at the end of the form conversation.

It’s important to set a confirmation message as the user will not be informed on the screen after the form is submitted.

You have plenty of flexibility in the type of message you display to the user, especially when using Gravity Form Merge Tags.

You can provide internal or external links (as seen in our demo here) to users, and you can display a personalized message to users using Gravity Form Merge Tags. More information about Merge Tags can be found here.

Show a Conversation Button on the Home page or the entire website:

Settings -> Conversation Form -> Choose a form

Embed a conversation into a post/page with a short code:

Add a Floating Conversation Button to a specific page with a short code:

Trigger a conversation with a link:

<a href="/open-magic-conversation?form_id=1">Open Conversation</a>

Trigger a conversation with JavaScript code:

window.mcfgf_open_magic_conversation("/open-magic-conversation?form_id=1");

Choose a form – Select the form you would like to use.

Chat Input Placeholder – Enter the default text you’d like users to see in the chat window input field.

Button Color – Select the color for the conversation send button.

Global Conversation Button – Keep this button checked to enable the conversation button at the bottom right side of every page on your site.

Home Page Only – Check this box to display the conversation button on the home page only.

Notification with welcome message – Keep this checked to display a welcome message on top of the global conversation button.

Background Color – Select the background color for the global conversation button.

Image for normal status – Choose your own custom image and upload it to display as the normal status.

Image for active status – Choose your own custom image and upload it to display as the active status. This is the image that when clicked, will close the chat window.

Conversation Header – Check this box to display a conversation header when the global conversation button is enabled.

Title for Conversation Header – Add a custom title for the conversation header.

Sub Title for Conversation Header – Add a custom subtitle for the conversation header.

Display Name for Conversation Header – Add a display name for the conversation header.

Background Color – Select a color for the background of the conversation header.

Add your custom CSS code.

Displays a list of form questions.

You can add new questions on this page.

You can add the form fields you’d like to use on this page

Customize your conversational form on this page.

• Select the avatar that represents your form speaking to the user.
  
  
• Background Color – Select the background color of the Robot side chat bubble.
  
  
• Font Color – Select the font color of the Robot side chat bubble.

• Select the avatar that represents the form user.
  
  
• Background Color – Select the background color of the user side chat bubble.
  
  
• Font Color – Select the font color of the user side chat bubble.

• Line Height – Adjust the line height.
  
  
• Font size – Adjust the font size.
  
  
• Border Radius – Adjust the border radius.
  
  
• Padding Multiply – Adjust the padding of the chat bubbles.