🌐 9.1 Embedding Content

the embed widget allows you to import your community's content to other websites, enabling participants to view and order tickets without leaving your homepage you can embed events, classes, memberships or your whole community calendar or event list use the dashboard to customize your embeds, change their color scheme and font styles to match your community's style ⚙️ widget content updates automatically whenever you edit membership details in sweatpals embeds when managing embeds in a general way, it's best to tap on the " embeds " tab from here, you can easily manage all 3 embed categories at once calendar events memberships embed properties the embed tab provides 3 properties that work in tandem with the 3 experience categories content use it to choose what embed cateogry to display display set the display style for that specific category (set filters, choose what events and memberships to display) design set font style and color preferences 🔔 private events and memberships will not show up once the public embed link is created legacy embed tools although the new "embeds" tab is the intended flow, as they have enhanced functionality, you can still use the legacy embed options when necessary these options are accesible when exploring the events and membership tabs how to embed event calendar go to the community dashboard and select the "events & classes" tab click on "embed community widget" customize your embed appearance, set display style, font style and color scheme click on preview embed, once ready, copy and paste the code on your homepage how to embed events & classes go to the community dashboard and select the "events & classes" tab select a particular event or class click on "embed code" customize your embed appearance, set display style, font style and color scheme click on preview embed, once ready, copy and paste the code on your homepage how to embed memberships go to the community dashboard and select the "memberships" tab click on "embed list" customize your embed appearance, set display style, font style and color scheme click on preview embed, once ready, copy and paste the code on your homepage example embed snippet \<! sweatpals membership widget > \<div id="sp membership widget">\</div> \<script src="https //cdn sweatpals com/widget js" data community="urbanlagree" data display="inline">\</script> embedding content changing size and dimensions the embed feature allows you to display your community's calendar, events or memberships on your main site our embed widget is compatible with popular cms apps such as wordpress, wix, shopify, squarespace, among others here we'll share some quick steps in case you encounter issues when embedding our widget in your website, such as how to upscale and downscale content, so that it matches the rest of your site in order to perform this, you'll just need the embed code from the dashboard panel our html template, which you'll use to modify the base embed code our css template, which you'll use to change the embed's dimensions 💡 tip in case you don't need to change the widget's size, just copy paste the code directly from the sweatpals dashboard step by step copy the embed code from your sweatpals dashboard your code should be similar to this \<script src="https //www sweatpals com/static/embed/community/calendar/events/script js?communityusername=sweatpals test community\&primarycolorhex=4f5069\&popupbackgroundcolorhex=ffffff\&headerfontcolorhex=000000\&fontfamily=montserrat">\</script> head over to your cms, enable edit mode paste the embed code wrap the embed code inside a division ( \<div> \<div/> ), this will allow you to edit the embed's height and width in css use this template \<div class="sweatpals widget"> \<div class="sweatpals widget"> \<your embed code> \</div> \</div> your code should like similar to this \<div class="sweatpals widget"> \<div class="sweatpals widget"> \<script src="https //www sweatpals com/static/embed/community/calendar/events/script js?communityusername=sweatpals test community\&primarycolorhex=4f5069\&popupbackgroundcolorhex=ffffff\&headerfontcolorhex=000000\&fontfamily=montserrat">\</script> \</div> \</div> head over to your css editor, and paste this css template this will allow you to edit the widget's dimensions (height, width, scale, etc) / === sweatpals widget container === / sweatpals widget { width 100%; max width 800px; / ⬅ change this / max height 1200px; / ⬅ change this / overflow hidden !important; margin 0 auto; } / === sweatpals widget iframe === / sweatpals widget iframe { width 105% !important; / slight overdraw to avoid side clipping / height 100% !important; max width none !important; max height none !important; transform scale(0 95); / shrinks content if needed / transform origin top center; border none; } edit the css template's properties (height, width and scale) in order to upscale or downscale the size of your embed in case your embed looks too big, reduce height, width and/or scale in case your embed looks too small, increase these values css properties breakdown here we share some popular css properties and examples included in the template, that will help you size/resize embeds, add them into your css code whenever your embed imports don't fit in your website's frame height/width use it to directly edit the embed's dimensions (height and width), you can combine this with scale for a more accurate sizing you can set height and width with either fixed values (like pixels), or with % (of the total value) height 120px; width 100px; height 100%; width 80%; overflow use it when your embeds don't seem to fit within your site's dimensions (embeds being cut off or not matching a frame, too large, etc) overflow hidden; (hides overflow, preventing it crowding other parts of the page) overflow scroll; (hides oveflow, but adds a scroll to allow displaying all the content by sliding) 💡 overflow needs its element to have a set size in order to work (height and width) transform instead of overflow, you can use transform to upscale or downscale embeds when they don't properly fit within your site's dimensions transform scale; (upscale or downscale the original content eg scale(0 95), scale(1 20)) does the content from embeds update automatically? yes, if you update or change event, class or membership information, the embed widget will update automatically to reflect the new changes do participans leave my page when using the embed links? no, participants will be able to view your items and complete the purchase without leaving your homepage the dashboard will sync their information in sweatpals just as if they acquired their tickets in our site does the analytics dashboard account for interactions from the embed option? yes, the dashboard accounts for interactions originating from embedded widgets, as well as interactions from sweatpals' community and event pages this includes page views and ticket sales