Embedding Widgets in your Outgrow Content

Outgrow now lets you use multiple widgets in your Outgrow interactive content to offer additional real-time value to your users. You can embed any of the following widgets in your Outgrow content using a Custom HTML page:

A. Address Map Locator
B. Calendly
C. Chart
D. ChiliPiper
E. Country State & City List
F. Custom Html
G. Dynamic Dropdown
H. E-Signature
I. Outreach
J. Payment Widget
K. Pdf Embedder
L. Phone Number Verification
M. Products
N. QR Code
O. Skype
P. Spreadsheet
Q. Table
R. Take Photo
S. Zoom

Using this document you can learn more about how you can add a widget to your Outgrow content, and how each of these widgets individually can offer real-time value to your content.

How to add a Widget in your Outgrow Content

To embed a widget in your Outgrow content, you can follow the below-mentioned steps:

1. Login to your Outgrow dashboard, and open the respective content in Build mode.

2. In the Build tab, click on Add New button to add a new widget.

3. In the Widget tab, you can choose the respective widget that you would like to add in your Outgrow content

4. Once the widget is added, you can then go ahead and customize the widget as per your requirement. For each widget, you can customize the overall look and feel of the widget tab using the Design and Layouts tab. You can also configure User Redirect and add a Countdown Timer from the Advanced tab.

What value can each Widget add to your Content

A. Address Map Locator: Using this widget, you can let your users select their location using Google Maps. To add Google Maps to your content, you will have to add your Google Map API Key to your Outgrow content.

NOTE: To get your Google Maps API Key, go here and create one, then copy it back in the text box below. Open this link if you already have one.

B. Calendly: You can let your users book a call with you or your team directly from your Outgrow content, by embedding your Calendly widget. For this, you will have to add your Calendly User ID in your Outgrow builder for the respective content.

C. Chart: You can embed a chart as well in your Outgrow content, using the Chart widget. Once the widget is embedded, you can click on the Edit icon (pencil icon) under Chart, and update the values that will be used in the chart. NOTE: You can import values to be used in the chart by either Importing an Excel file, or by using JSON Feed URL to fetch the values.

You can choose from any of the below-mentioned options, to display a chart in your content:

1. Column Chart
2. Bar Chart
3. Pie Chart
4. Line Chart
5. Scatter Chart
6. Dial Axis Chart

'
D. ChiliPiper: You can now let users schedule an appointment with you directly from your Outgrow content, by embedding the Chilipiper Appointment Scheduler widget in your content. For the widget to work, you will have to add your Chilipiper Scheduler URL in the respective content.

E. Country State & City List: Using this widget, you can now let users select their Country, State, and City from the dynamic dropdown list. How this widget will work is that, when a user will select a Country from the Country drop-down, a State drop-down field will appear which will have State values that a user can choose from. These values will be fetched dynamically on the basis of the Country selected in the previous field. Once the State value will be selected, a City field will appear with a dynamic set of values.

F. Custom Html: Using the Custom HTML widget, you can display a customized set of information in your content. This information could be text, video, etc, that can be helpful for you to communicate your message to the end user.

G. Dynamic Dropdown: Using this widget, you can display a subset of groups on a dynamic basis, depending on the values that they select. Here are a few important things that you need to keep in mind:

A. Adding/removing the ( ) will create a nested option group.
B. You can nest lists as deeply as you want and use as many indentation spaces per line as you want.
C. The first level option group will have one ( ).
D. Increasing the number of ( ) will add the successive option as its child.
E. Decreasing the number of ( ) will put the option in its parent option group.
F. You can nest lists as deeply as you want and use as many ( * ) as you want, to project parent/child relations.

H. E-Signature: You can allow users to submit their eSignatures by embedding the eSignature widget in your Outgrow content. You can either opt to use a Custom eSignature type, or you can choose to integrate with DocuSign or Hellosign to collect eSignatures.

Here is how the integration with DocuSign or HelloSign will work:

1. Integrating with DocuSign: To use DocuSign to collect signatures, you need to first authenticate DocuSign integration in your Outgrow content by adding your DocuSign Integration Key, Secret Key, and Redirect URL. You can then configure all fields for which the user will have to share his/her details for the form, and can then set up how the document will be signed by the user.

NOTE: The Redirect URL is the URL to which DocuSign will redirect the browser after authentication when using the Authorization Code Grant authentication flow.

2. Integrating with HelloSign: To use HelloSign to collect signatures, you need to first authenticate HelloSign integration in your Outgrow content by adding your HelloSign Client ID, API Key. You can then configure all fields for which the user will have to share his/her details for the form, and can then set up how the document will be signed by the user.

I. Outreach: You can embed your Outreach appointment scheduling widget in your Outgrow content, to enable your users to schedule calls with you or your team on a real-time basis. You will be required to add your Outreach URL in your Outgrow content for the widget to work.

J. Payment Widget: In case you want to collect payments using your Outgrow content, you can embed a Payment Widget in your content. You can integrate with either Paypal or PayU payment gateway to collect payments.

1. Integrating with PayU Payment Gateway: To integrate your PayU gateway, you need to first add your Merchant POS ID, Secondary Key, oAuth Client ID, and oAuth Client Secret in the respective Outgrow content. You can then specify the Currency and the Amount that you would like to collect using your content.

NOTE: Make sure the currency you select here is supported by your Merchant account.

2. Integrating with PayPal Payment Gateway: To integrate your PayPal gateway, you need to first add your Client ID, and Secret Key in the respective Outgrow content. You can then specify the Currency and the Amount that you would like to collect using your content.

K. Pdf Embedder: You can embed a PDF file in your Outgrow content on a Custom HTML page. Once the file will be embedded in the content, users will be able to download as well as print the PDF file.

L. Phone Number Verification: In case you are collecting phone numbers using your Outgrow content, you can opt to authenticate these numbers to ensure that your database stays healthy. You can authenticate and verify phone numbers by using:

1. Twilio With OTP.
2. Numverify Without OTP.
3. Numverify Without OTP (Via APILayer).

M. Products: In case you want to provide your users the flexibility to purchase specific products using the respective Outgrow content, you can do so by using the Product Widget in your content. You can manually add the products one by one, and can then integrate your content with Stripe Payment Gateway to collect the payment for the products.

N. QR Code: You can now use the QR Code Widget to embed a QR Code in your content. Users can scan the code and can see the message or information that you have shared with them. NOTE: This can be really helpful in cases where you want to promote App Downloads, Contact Card Sharing, etc.

O. Skype: You can allow users to reach out to you directly on Skype, by embedding the Skype Widget in your Outgrow content. For the widget to work, you will have to specify your Skype Username in the Outgrow builder.

P. Spreadsheet: You can display a spreadsheet as well in your Outgrow content using the Spreadsheet widget. You can update the number of rows or columns that you want to display using the spreadsheet editor and can add information to the spreadsheet by uploading an excel.

You can change the values displayed in the spreadsheet, and can also update the look and feel of the spreadsheet using spreadsheet editor.

Q. Table: You can embed a table on a Custom HTML page in your Outgrow content. You can use the Table widget to display information in the table that might be useful for the user in making a decision, or in learning more about what is it that you have to offer.

NOTE: You can update the rows and columns in the table by either uploading an excel or by using a JSON URL.

R. Take Photo: You can allow users to take photos using your Outgrow content by embedding the Take Photo Widget.

S. Zoom: You can allow users to book a meeting with you or your team using your Zoom Meeting Scheduler. You will be required to add your Zoom Scheduler URL in the respective content's builder for the widget to work.

T. Review Before Submit: Using this widget, you can allow the users to review the responses added by them before the responses are submitted.

If you still have any questions, feel free to reach out to us at [email protected] and our team can help you with a quick solution.