Integrate Zipteams Instant Meeting on HubSpot Forms

Embed Zipteams with Hubspot forms

Pre-checks
  1. You need to be on Hubspot Marketing Professional or Enterprise editions to embed Zipteams meeting rooms on your existing website or landing pages.
  2. You need to be using Hubspot forms on your Hubspot website or WordPress or any other landing pages to use the below steps.
  3. Please note we use the Hubspot standard First Name, Last Name, Company Name and Email fields to pass data to the meeting widget. If you use any other fields, you need to change the same in the prefillObj fields in the below code. Take the help of your developers or reach out to us at hello@zipteams.com to help you with it.
  4. If you are using redirection URL post submit, please contact us on hello@zipteams.com to help you with this.
  5. Signup on https://app.zipteams.com to create your account. In left menu Go to My Workspace > Integrations > Click on ‘Configure’ against Instant Connect Widget. Copy your instant meeting URL on the Shareable link page. You can also change your instant meeting widget settings from here.
 
Steps to integrate with Hubspot form
  1. Login into your Hubspot account and go to the form you want to embed Zipteams widget on. Copy the embed code of the form in a separate note file
  2. Go to Marketing > Files and Templates > Design Tools
  3. In left hand menu, click on File >  New File
  4. In the popup that opens, select in ‘What would you like to build today?’ from dropdown -> Module 
  5. Click on Next 
  6. Select all in ‘Where would you like to use the module?’
  7. Select module scope as – Local module
  8. Put the filename as ‘Zipteams Widget – <Your form name>’
  9. In the code window that opens, in the top section module.html, paste the code put at the end of the page.
  10. Change and replace your own Hubspot portal ID, Form ID and your Zipteams Instant Widget URL in the bold parts of the code
  11. Click on ‘Made available in templates and pages’ on top right hand side
  12. Click on Publish.

 

Updating the landing page
  1. If you are using Hubspot forms on Hubspot website or landing pages, go to your landing pages and replace your existing form with this Zipteams widget by selecting the Zipteams widget from the left hand side menu. Publish the page and once you click submit on your form, you will see the Zipteams popup windown.
  2. If you are using Hubspot forms on WordPress or any other landing page, you can copy the below code and replace the Hubspot form code with this code after making changes to your portal ID, form ID,  Zipteams Instant Connect URL.

 

Activate Instant Meeting on Zipteams Dashboard
  1. To test the instant meeting, signup on https://app.zipteams.com
  2. On the left-hand menu bottom, use the toggle to make yourself available for instant meetings.
  3. That’s it, you can now test your website form and test the instant meeting popup opening on your website or landing page.

 

Get Sales teams to be available for Instant Meetings
  1. Ask sales teams to signup on https://app.zipteams.com 
  2. Tag all sales team members in My Workspace > Teams to the tag ‘product demo’ or the tag you have specified while creating the widget. Ensure you do this carefully for all team members who need to take the instant meetings.
  3. Now, sales team members can activate their toggle on taking instant meeting request on left hand side menu whenever they are ready to take instant meetings.
  4. Website or landing page visitors will see the instant meeting popup only when any of the sales team members have put themselves active on the toggle on their dashboards. 

 

Code to be used
<link href="https://scripts.zipteams.com/webwidget/index.css" rel="stylesheet" />

<script type="text/javascript" id="zt-script-loader" async src="https://scripts.zipteams.com/webwidget/index.js"></script>

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>

<script>

    hbspt.forms.create({

        portalId: "XXXXXXXX", // Replace with your portal ID

        formId: "XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX", // Replace with your form ID

        cssClass: "zt-hs-form hs-custom-style",

        submitButtonClass: "zt-hs-submit-button",

        onFormSubmit: function ($form) {

            let form = null;

            if ($form.tagName === "FORM") {

                form = $form;

            } else {

                form = $form[0];

            }

            const inputCollection = form.getElementsByTagName("input");

            const selectCollection = form.getElementsByTagName("select");

            const elemArray = [...inputCollection, ...selectCollection];

            // This object should contains value for all questions added in Zipteams Event (Instant / Calendar)

            // format should, label - value where label is Label is question configured in Zipteams Event

            // {

            //     "[label]": ""

            // }

            // Example below:

            const prefillObj = {

                Name: "",

                "School Name": "",

                Email: "",

            };

            // Here fill the prefillObj with the values entered in hubspot form fields

            // We need to check for fields with their contact/company property name

            // Then we map that to respective key in prefillObj

            // Example below

            elemArray.map((input) => {

                const elemId = (input && input.id) || "";

                const elemValue = (input && input.value) || "";

                if (elemId.startsWith("firstname")) {

                    prefillObj["Name"] = elemValue;

                }

                if (elemId.startsWith("email")) {

                    prefillObj["Email"] = elemValue;

                }

                if (elemId.startsWith("name")) {

                    prefillObj["School Name"] = elemValue;

                }

            });

            window.ZipteamsWidget.InitFullFrame({

                url: "https://zipme.at/spyne/onboarding-call-with-spyne",

                prefill: prefillObj,

                color: "#31667f"

            });

        },

    });

</script>