# leadin/11.1.21/scripts/shared/Meeting/PreviewMeeting.tsx

HubSpot All-In-One Marketing – Forms, Popups, Live Chat, version 11.1.21. 32 lines.

- Page: https://pluginprobe.com/plugins/leadin/11.1.21/code/scripts/shared/Meeting/PreviewMeeting.tsx
- Raw: https://pluginprobe.com/plugins/leadin/11.1.21/raw/scripts/shared/Meeting/PreviewMeeting.tsx
- Modified: 2024-06-05T09:30:44+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/leadin/11.1.21/code/scripts/shared/Meeting/PreviewMeeting.tsx#L10-L20`.

```tsx
import React, { Fragment, useEffect, useRef } from 'react';
import UIOverlay from '../UIComponents/UIOverlay';
import useMeetingsScript from './hooks/useMeetingsScript';

interface IPreviewForm {
  url: string;
}

export default function PreviewForm({ url }: IPreviewForm) {
  const ready = useMeetingsScript();
  const inputEl = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ready) {
      return;
    }
    if (inputEl.current) {
      inputEl.current.innerHTML = '';
      const container = document.createElement('div');
      container.dataset.src = `${url}?embed=true`;
      container.classList.add('meetings-iframe-container');
      inputEl.current.appendChild(container);
      const embedScript = document.createElement('script');
      embedScript.innerHTML =
        'hbspt.meetings.create(".meetings-iframe-container");';
      inputEl.current.appendChild(embedScript);
    }
  }, [url, ready, inputEl]);

  return <Fragment>{url && <UIOverlay ref={inputEl}></UIOverlay>}</Fragment>;
}

```