Framer
Follow this step-by-step guide to embed your application into your Framer project:
Example website: Now Tech Conf Event
Step 1: Prepare for Publication
Once you’ve added all your data and customized your Schedule/Planner/Calendar application, you’re ready to publish it in Framer.
Step 2: Open Your Framer Project
- Open the Framer application and select your project.
- In the top-left corner, click the dropdown menu and choose "Site Settings".
- From the nested menu, select "Open Settings".
Step 3: Add Custom Code
- Scroll to the bottom of the Settings page until you find the "Custom Code" section.
- Go to Planby Now dashboard and copy the embed code from your application’s home page.
- Paste the code into the "End of
<body>tag" field in the Custom Code section.
<script
async
defer
src="https://www.planbynow.app/tool.js"
apk="YOUR_API_KEY"
app="YOUR_APP_NAME"
></script>
Step 4: Insert Embed Element in Framer
-
Return to the Framer editor.
-
In the editor, click the "Insert" button located in the top-left corner.
-
Use the search bar to find "Embed", then select the Embed element and place it on your page.
Step 5: Configure the Embed Element
-
Click on the Embed element you added to your page.
-
In the menu on the right side, go to the HTML tab.
-
Paste the embed code from Planby Now dashboard into the HTML field.
<div style="height: 600px; width: 100%">
<planby-now styles="box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; border-radius: 8px" />
</div>
Step 6: Publish Your Project
- Click the "Publish" button in Framer to make your updates live.
-
Your schedule or application will now be embedded and visible on your website or service.
That’s It! 🚀
You’ve successfully embedded your application into your Framer project. The entire process takes just a few minutes and seamlessly integrates your app into your website.