The Answer with Embedded HTML Skill

The Answer with embedded HTML skill type can be used to enable your agent to present content and interactions from a wide variety of third-party applications within the conversation it has with a website visitor.

For example, you can add skills to enable your agent to:

Embed a web form
Book a meeting
Display a video
Present a survey

How to Find Embedded Code for Popular Applications

This guide will walk you through how to give your agent additional skills using services you already use.

Embedding a Web Form

1. HubSpot

HubSpot Forms allows you to collect and manage form submissions efficiently.

Here's how to get the embedded code to integrate HubSpot Forms into your agent:

Log in to HubSpot: Go to HubSpot and sign in.
Select a Form: Choose the form you want to embed from your agent.
Click Share": Click on edit form then click on the share button.
Select "Embed code": Choose the Embed code option.
Copy the Embed Code: Click Copy to copy the provided HTML embed code.
Paste the Code: Add this code to the HTML section in the skill.

2. Formstack

Formstack Forms provides a flexible way to create and manage online forms.

Here's how to get the embedded code to integrate Formstack Forms into your agent:

Log in to Formstack: Visit Formstack and log in.
Select a Form: Choose the form you want to embed from your dashboard.
Click Embed: On the form’s page, click the Embed option.
Choose Your Embed Type: You can select options like Javascript Embed or Iframe Embed.
Copy the Embed Code: Once customized, copy the provided HTML code.

Meeting Scheduling

The different meeting scheduling apps include:

1. Calendly Meeting Scheduling

Calendly allows you to schedule meetings with ease.

Here's how to get the embedded code to integrate Calendly into your agent:

Log in to Calendly: Go to Calendly's website and sign in with your credentials.
Select an Event Type: Click on the event type you want to embed (e.g., 30-Minute Meeting).
Click on "Share": On the event type page, click the Share button at the top.
Choose "Add to Website": From the dropdown, select Add to Website.
Select Embed Option: Choose from options Inline Embed.
Copy the Embed Code: A code snippet will appear. Click Copy Code to save it to your clipboard.
Paste the Code: Paste this code into your website’s HTML where you want the Calendly scheduler to appear.

2. Google Meet Scheduling

Google Meet Scheduling helps you set up and manage virtual meetings effortlessly.

Here's how to get the embedded code to integrate Google Meet Scheduling into your agent:

Set Up a Google Calendar Appointment Page:
- Log in to Google Calendar: Go to Google Calendar and sign in with your Google account.
- Create a New Event: Click on a date and time on the calendar. In the event creation pop-up, select Appointment schedule instead of the default Event.
- Customize Your Booking Page:
  - Title the Appointment: Give your appointment a name that will be visible on the booking page.
  - Set Up Availability: Customize the availability by selecting time slots when you are free for meetings.
  - Customize the Appointment Page: You can add a description, location (choose Google Meet), and other details to the booking page.
- Save the Appointment Schedule: Once customized, click Save to create the appointment schedule.
Share the Booking Page:
- Access the Booking Page Link: After saving, Google Calendar will generate a booking page link. Click Share next to the link.
- Get the embedded code: click on the Website embed button and click on the copy code button and paste the code in the agent.

Finally, here is an example of the embedded code that you need to copy and paste into your agent's skill.

<!-- Google Calendar Appointment Scheduling begin -->
<link
  href="https://calendar.google.com/calendar/scheduling-button-script.css"
  rel="stylesheet"
/>

<div id="calendar-scheduling-button"></div>

<script>
  (function () {
    function loadCalendarScript() {
      var script = document.createElement("script");
      script.src =
        "https://calendar.google.com/calendar/scheduling-button-script.js";
      script.async = true;
      script.onload = function () {
        calendar.schedulingButton.load({
          url: "https://calendar.google.com/calendar/appointments/schedules/[identifier]?gv=true", // Updated URL
          color: "#333333", // Color can be customized
          label: "Book an appointment", // Label can be customized
          target: document.getElementById("calendar-scheduling-button"),
        });
      };
      document.head.appendChild(script);
    }

    if (document.readyState === "complete") {
      loadCalendarScript();
    } else {
      window.addEventListener("load", loadCalendarScript);
    }
  })();
</script>
<!-- end Google Calendar Appointment Scheduling -->

Surveys

The different survey apps include:

SurveyMonkey

SurveyMonkey enables you to create surveys and analyze responses easily.

Here's how to get the embedded code to integrate SurveyMonkey into your agent:

Log in to SurveyMonkey: Go to SurveyMonkey and sign in.
Select a Survey: Choose the survey you want to embed from your dashboard.
Click "Collect Responses": Click on the Collect Responses tab at the top.
Select "Embed on Website": Choose the Embed on a site option.
Customize the Embed Code: Customize the appearance and size of the survey embed.
Copy the Embed Code: Click Copy to copy the provided HTML embed code.
Paste the Code: Add this code to the HTML section in the skill.

Embedded Video Apps

The different embedded video apps include:

1. YouTube Video

YouTube Video allows you to share and embed videos seamlessly.

Here's how to get the embedded code to integrate YouTube Video into your agent:

Step-by-Step Guide:

Find the Video on YouTube: Go to YouTube and search for the video you want to embed.
Click on Share: Below the video, click the Share button.
Select Embed: From the sharing options, click Embed.
Adjust Settings: You can adjust the width and height parameters in the iframe code to better fit your website's layout.
Copy the Embed Code: A box will pop up with an HTML iframe code. Click Copy to copy the code to your clipboard and add it to your agent skill.

Finally, here is an example of the embedded YouTube code that you need to copy and paste into your agent's skill.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/[identifier]"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen
></iframe>

By following these steps, you can easily embed essential tools like meeting schedulers, surveys, and forms into your website, even if you have no prior experience with these services. Each section provided a detailed guide tailored to beginners, ensuring that you can successfully integrate these services into your workflow.