VideoAsk

Article author
Memberstack Team
  • Updated

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. 

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.

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>

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>

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.