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>
Comments
0 comments
Please sign in to leave a comment.