guide - Integrating VenueStack Script and Registration Button into Framer

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

1. Open Your Framer Project:
   • Launch Framer and open the project where you want to add the VenueStack script.
2. 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).
3. 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.
4. 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 code

     import { VenueStackScript } from "./VenueStackScript"
     

   • Include the <VenueStackScript /> component in the return statement of your React function component.

Step 2: Adding the Registration Button

To add a registration button that links to a specific event, follow these steps:

1. Identify Where to Place the Button:
   • Decide on the location in your Framer project where you want the registration button to appear.
2. Add a New Text or Button Component:
   • Drag and drop a Text or Button component to the desired location in your Framer canvas.
3. Customize the Button:
   • Select the Text or Button component and enter the label, such as "Register".
4. 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 code

     https://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.