guide - Integrating VenueStack Script and Registration Button into Framer
This guide will help you add a custom script from VenueStack to your Framer site and set up a registration button for your events. Follow the steps below to allow your visitors to register for events seamlessly through your Framer website.
Step 1: Adding the VenueStack Script to Your Framer Project
To use VenueStack functionalities, you need to include their script in your Framer project. You can do this by using Framer's custom code feature.
Using Custom Code in Framer
- Open Your Framer Project:
- Launch Framer and open the project where you want to add the VenueStack script.
- Add a Custom Code Component:
- In the bottom left corner, click on the + icon next to "Code" to create a new code file.
- Name this file appropriately (e.g.,
VenueStackScript.js
).
- Edit the Custom Code Component:
- Paste the following JavaScript code into your new code file:
import { useEffect } from "react"; export const VenueStackScript = () => { useEffect(() => { const script = document.createElement('script'); script.src = "https://www.venuestack.com/scripts/embed.js"; script.defer = true; document.head.appendChild(script); return () => { document.head.removeChild(script); }; }, []); return null; };
- This component will add the VenueStack script to your project when used.
- Paste the following JavaScript code into your new code file:
- Use the Component in Your Project:
- Import and include the
VenueStackScript
component in your main app or specific frame where you want the script to be active. Add the import statement at the top of your app file or the specific frame file:
javascriptCopy codeimport { VenueStackScript } from "./VenueStackScript"
- Include the
<VenueStackScript />
component in the return statement of your React function component.
- Import and include the
Step 2: Adding the Registration Button
To add a registration button that links to a specific event, follow these steps:
- Identify Where to Place the Button:
- Decide on the location in your Framer project where you want the registration button to appear.
- Add a New Text or Button Component:
- Drag and drop a Text or Button component to the desired location in your Framer canvas.
- Customize the Button:
- Select the Text or Button component and enter the label, such as "Register".
- Set the Link to the Event:
- With the component still selected, go to the properties panel on the right-hand side.
- Look for the "OnClick" event or a similar option to handle interactions.
- Use a custom code override or an interaction that navigates to a URL and set the URL to:
bashCopy codehttps://www.venuestack.com/e/{EVENT_ID}/checkout
- Replace
{EVENT_ID}
with the actual ID of your event.
Conclusion
You have now successfully integrated the VenueStack script into your Framer project and added a registration button for your events. Make sure to replace {EVENT_ID}
with your specific event ID to correctly link the buttons.
This guide aims to provide a basic understanding of how to integrate third-party scripts and elements into Framer. Depending on your project's complexity, you might need to adjust these instructions or explore more advanced features in Framer.