VideoAsk

You can use the Memberstack 2.0 front-end API and the following code to inject authorized member data into your VideoAsk widgets. Please note that your VideoAsk widget will only load if the member is logged in.   

1) Demo Video

This video is a quick demo for this project which is clonable in Webflow. 

Below the video is the tutorial with code snippets.

ℹ️ This article applies to static / multi-page sites like Webflow only.

2) Launch VideoAsk Modal With Button

Step 1: Make sure this page has a button to launch the modal with. Give the button an id; you’ll need this in the next step.

Step 2: Update the BUTTON_ID & BASE_VA_URL variables with your own values (bolded).

Step 3: Place the following code in the BODY section of the page you want to render the VA modal.

<script src="https://www.videoask.com/embed/embed.js"></script>
<script>
	// id of button to launch modal
	const BUTTON_ID = "video-ask-launcher";

	// videoask video url
  const BASE_VA_URL = "https://www.videoask.com/{id}";

  const getVideoAskConfig = ({ name, email }) => ({
    kind: "widget",
    url: `${BASE_VA_URL}#contact_name=${name}&contact_email=${email}`,
    options: {
      widgetType: "VideoThumbnailWindowTall",
      modalType: "Fullscreen",
      text: "Let's get started",
      backgroundColor: "#FF3C4C",
      position: "top-right",
    },
  });

  function injectVideoAsk({ name = "", email = "" }) {
    let videoAskLauncher = document.getElementById("video-ask-launcher");
    // listen for click on button
    videoAskLauncher.addEventListener("click", () => {
      window.VIDEOASK_EMBED_CONFIG = getVideoAskConfig({ name, email });
      window.videoask.loadModal(getVideoAskConfig({ name, email }));
    });
  }

  window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
    if (member) {
      const email = member.auth.email;
      const fields = member.customFields;
      let name = `${fields["first-name"]} ${fields["last-name"]}`;
      injectVideoAsk({ name, email });
    }
  });
</script>

3) Launch VideoAsk Widget in Floating Thumbnail

Here's a live preview and clonables. 

Place the following code in the BODY section of the page you want to render the floating widget.

<script src="https://www.videoask.com/embed/embed.js"></script>
<script>
	// your videoask video url
  const BASE_VA_URL = "https://www.videoask.com/{id}"

  const getVideoAskConfig = ({ name, email }) => ({
    kind: "widget",
    url: `${BASE_VA_URL}#contact_name=${name}&contact_email=${email}`,
    options: {
		// look at videoask docs for help on customizing widget / modal style
      widgetType: "VideoThumbnailWindowTall",
      modalType: "Fullscreen",
      text: "Let's get started",
      backgroundColor: "#FF3C4C",
      position: "top-right",
    },
  });

  function injectVideoAsk({ name = "", email = "" }) {
    window.VIDEOASK_EMBED_CONFIG = getVideoAskConfig({ name, email});
    window.videoask.loadEmbed(getVideoAskConfig({ name, email }));
  }

  window.$memberstackDom
  .getCurrentMember()
  .then(({ data: member }) => {
	   if(member) {
			const email = member.auth.email;
      const fields = member.customFields;
      let name = `${fields["first-name"]} ${fields["last-name"]}`;
	    injectVideoAsk({ name, email });
		 }
  });
</script>