Search the Community
Showing results for tags 'iframe'.
-
Hey there! I need to integrate a Calendar into my SS site but the functionality of the SS Calendar block makes no sense for my use case. I am building a site for a small boutique hotel. They DO NOT want to allow for bookings on their site (so no need for the Scheduling option) and they DON'T want anyone to be able to edit, amend their calendar, all they want is a calendar that shows block out dates for each of their rooms (of which there are 3). So having used Google Calendar for quite some time, I know it is possible to select a day range and assign that range a "calendar sub-section" with a color assignment. That is all I would really need. If Villa #1 is booked from Sept 1-8 I would assign it a RED BOOKED highlight, and if Villa's #2 & 3 are available they would be assigned a green AVAILABLE highlight. Make sense? (see attached pic) Is there anyway to do the with Google OR OTHER service which can be somewhat styled either on their end (Google's) or on Squarespace's end? Also IF there is a way to do this using built in SS tools please do let me know.. they don't want to pay $16/mo for a simple block out date calendar and I don't blame them. Thanks!
-
I embedded a PDF which shows a gray background on a monitor. I would like the background to be transparent or white. I know how to adjust the sizing inside the embed data box but can't change the gray background. I'm not sure if I need to change it in the embed data box or in the Custom CSS section of the site. Regardless, I've tried both and failed. I need the CSS and where to put it. Can anyone please help me? Thank you very much, CJ https://michael-james-4flv.squarespace.com/config/pages https://www.blueridgeresearch.com/careers
-
I'm going to try to explain this the best that I can! If it sounds like I don't know what I'm talking about, it's because I don't. 😭 I have a client who uses SalonBiz for her spa bookings. SalonBiz recently upgraded their systems where you can now use an embed code to launch an iframe on your site. My client is super excited about this upgrade. However, because of how I've already designed the site, we want to use our own native Squarespace buttons, as opposed to the embedded buttons provided by SalonBiz through the code. To my knowledge, I can't figure out a way to use our own buttons via the Button Block, but still get the iFrame to work. I know there's always the option of using some CSS and styling a code block, but I'd like to avoid that if I can. It wouldn't work on the services page where we're using Lists. Part of my frustration here is that I have worked successfully with iframes while working on another SQSP site (www.poipuoffshoreadventures.com) that integrated with Fareharbor, and they provided super easy code where you can literally just add a URL to native SQSP buttons, and then an additional script in the <body>, and the iframe works like a charm. Anyway, SalonBiz has not been helpful, and I'm hoping I'm not crazy in thinking it's still possible to figure this out. I have the embed code, and the widget URL, but I can't figure out how to make it work like it did when I worked with Fareharbor. Here's a link to all the code, and at the very bottom I showed the Fareharbor code if that's helpful at all lol: https://docs.google.com/document/d/1Lr587XCyNNUZ2N_GHEPzjJmECv50Hbep6BqkCZ2z4Qs/edit?usp=sharing
-
I am currently trying to embed an iframe code to my site, to showcase fonts I am trying to sell. When i try to do this, it shows in preview mode but then the content in the page disappears when I exit the edit more and go on preview. Feeling super frustrated with this. This is the code I am using <iframe src="https://app.fontvisual.com/showcases/03349d97-9998-4467-839e-93d451c57706" height="600px" width="100%" frameborder="0" allowfullscreen</iframe> Using this directions https://fontvisual.com/help/font-preview-tool-for-squarespace Any help would be highly appreciated!
-
I installed an iframe to this website and originally had issues with it not displaying the full content, so I added some javascript. Now I'm having issues with the page dropping down to the iframe upon loading instead of letting the viewer scroll down to it. Help! This is the code I am starting with: <style> .styled-iframe { width: 100%; border: 2px solid #000; /* Add a border */ border-radius: 10px; /* Make the border corners rounded */ box-shadow: 5px 5px 15px rgba(0,0,0,0.3); /* Add a shadow */ } </style> <iframe id="myIframe" class="styled-iframe" src="https://matrix.canopymls.com/Matrix/public/IDX.aspx?idx=f4033431" frameborder="0" marginwidth="0" marginheight="0"></iframe> <script> function setIframeHeight() { var iframe = document.getElementById('myIframe'); iframe.style.height = window.innerHeight + 'px'; } window.onload = setIframeHeight; window.onresize = setIframeHeight; </script>
-
This is for webmasters and real estate agents looking for a Canadian IDX solution for Squarespace. The Canadian IDX system has a different database schema compared to the US one so provincial real estate board listings won't import to a Squarespace plugin. To make matters worse for webmasters, every board has their own database schema so you would need many different schema references to create a plugin that works for the entire country. One solution is to look for a Canadian DDF, IDX, or VOW listings provider that uses an iframe to show content, such as Agent iFrame, available at realtywebsites.ca. With a third-party solution, listings can be embedded into the Squarespace site or set to open in a new tab from a menu item. The latter solution provides a full-screen experience separate but still attached to the main site. If you really want to see the listings embedded, add some code above the mapped listing iframe, something like "click to open map in full screen mode" using a target=_blank variable in the <a href> tag. This makes it easy for people to choose.
-
Hi! I'm trying to embed this external URL on my Squarespace website, but it just appears as a blank grey screen for me. Can anyone help me display the below URL in iframe? URL To Display in iframe: https://shenandoahagtech.adalo.com/reports?uuid=0488266d-17ca-476d-9eb4-961b39afd82f&target=cvfrtl9gd5j1opa0gqg0guz7b¶ms={} OR this is the root URL: https://shenandoahagtech.adalo.com/reports?uuid=0488266d-17ca-476d-9eb4-961b39afd82f I've tried several different iframe configurations, but cannot get this URL to display in my Squarespace page. Some possible issues could be: 1. I know there are ampersands (&) in the URL and that may be breaking things? 2. Perhaps there are some permission issues I need to set or allow before this page can be displayed? This page is an output page of another project I'm working on in Adalo, but I don't need to authenticate or anything to just view this page in a regular browser, so why would iframe need extra permissions? If anyone can help me with this, I would really appreciate it! Thanks!
-
Good day, I am having an issue with an iframe on a site for a client. When I first added the iframe it worked perfectly for several weeks. Now it just will not display. I added the iframe in a page section using a code block. The code snippet I added is the code originally. I have tried shorting the URL, and that didn't seem to help. The password for the page is SLVS https://iris-finch-bjkm.squarespace.com/market-reports <!DOCTYPE html> <html lang="en"> <head> <title>HTML Full-screen iframe (100% Height and Width)</title> <style> body{ margin: 0; /* Remove default margin */ } iframe { width: 85vw; height: 100vh; margin: 0 auto; background-color: #00000; } iframe { display: block; border-style: none; } </style> </head> <body> <iframe src="https://shenandoahagtech.adalo.com/market-report-creator?_gl=1%2Auuurz8%2A_ga%2AMTAxMTY0NTI2Mi4xNjc4ODg5NzM3%2A_ga_SWT45DV35L%2AMTY4Mjk0OTk1OS41My4xLjE2ODI5NTEyNzUuNjAuMC4w¶ms=%7B%22ev9frhv78v6ajeq5pz58jbdqq.t_5iiljrxxcxsmp8z3af9fchgyi%22%3A31%7D&target=6fogos78ddnu4h6zcucdwahc7"></iframe> </body> </html> Let me know if you have any ideas as to why it will not show up. Thank you for checking into this.
-
Responsive iFrame for Outlook Bookings Page??
Travis_Ampersand posted a topic in Customize with code
I have a bookings page set up through Outlook and would like to have it appear correctly on the mobile version. The desktop version seems fine but the mobile version is cutoff quite a bit and very difficult to navigate. This is the code that I am currently using: <iframe src="https://outlook.office.com/bookwithme/user/61af79c8aef94946a0589f61fd7b7234%40LongandFoster.com/meetingtype/lAuxNDmwo028U_MGCos0fw2?anonymous" scrolling="no" width="1100" height="800" frameborder="0"> </iframe>
-
I have a page with an iframe. This iframe contains a web app which saves some data to localstorage. If I open the web app on its own without being inside an iframe then there's no problem. But when it is contained in the iframe of my SquareSpace page, the localstorage data is deleted after a while. I'm convinced that it's cleared after a period of time because simply refreshing or closing and reopening the tab will not cause the deletion. It's only being deleted after some time has passed. I have tested it with both Chrome and Safari on an iPhone. I haven't tried it on an Android phone. It doesn't happen on my Macbook. Why is this happening and how do I keep it from happening? -
I am trying to embed a google doc and below that a google folder using iframe code. In the backend, it works. On the public side, only the code that appears first works. (So, when I add the embed code for the google doc, the google folder no longer shows up. If I flip it and put the folder first on the page, the google doc no longer shows.) I've tried using embed blocks and code blocks and both give me the same issue. The website is https and so are the embed codes so that's not the issue. There seems to be a problem with displaying two embed codes in the same page. Does anyone have a solution? Thank you!
-
Site URL: https://vibraphone-cricket-z5f8.squarespace.com/ PW: redhorse Hello, the above is a test page I've made for this inquiry. I've used an embed block to embed a map from Google My Maps, and I need to remove some of the elements from the embedded map. Shown in red in the attached screenshot, I need to remove the little star next to 'Test Map' the little 'i' icon the 'This map was made with Google My Maps. Create your own.' statement the share button the 'View larger map' button I've done a lot of googling looking for a solution and unfortunately my coding knowledge is very limited, so I haven't been able to implement a solution successfully. My client's website does not have premium access to code blocks, so I have been trying to find a solution I could implement using the embed block or CSS editor. I would greatly appreciate any help on this matter or even being informed that what I'm trying to do is too advanced/impossible for the embed block/CSS editor. Please let me know if any further information is needed and thank you to anyone willing to try to help!
-
Hi everyone, I embedded an iframe plugin on my client's site, the problem is that the embed block window is about 50 pixels tall, and I have to scroll within that tiny window to see the whole verticality of the embedded form. I need to force the window to be taller somehow. Any ideas? -
Hi, I have an alignment issue with an iframe, which is inserted as: <iframe src="https://www.google.com/maps/d/u/0/embed?mid=10QuxzuB90p3JKR_7V1Bo98mGehHdOvw&ehbc=2E312F" width="960" height="550"></iframe> and it displays a Google Map with pins on it. (You can see it here.) When I open the site on a mobile device, this object appears oddly. Is there a way to make it seem okay both on a desktop and on mobile? Thank you, David
-
hi all. I have an iframe embedded (using Embed Block -> Code Snippet) - that brings in the latest image from a camera. For reasons I can't work out, when I make the iframe bigger to fill up the screen, parts of the image are cropped off (and a scroll bar appears to show the rest. Worse, it seems to work *sometimes* but not others. No matter what I do I can't get the full image to show at the one time. Please help! I've been trying for days with no luck! Video of it here : 7.1
-
I've been searching for answers but can't seem to find a solution here. When I preview my site for desktop, my embedded top header scroll bar appears right below my navigation, as it should. However, when I preview on mobile, the header appears above my navigation bar, with a large padding/empty space surrounding. Here is the code for my embedded header, nothing modified apart from the percentages: <iframe width="100%" height="100%" src="https://xd.adobe.com/embed/a42b60e7-298c-4428-a8a6-c8b95f04e482-f178/" frameborder="0" allowfullscreen> </iframe> The attached screenshot is how my site is appearing on mobile. Any help would be very appreciated. Thanks!!
-
I am looking to have my embedded iframe header ONLY appear on my home page. Does anyone know the code to have this done? Here is my current code: <iframe width="100%" height="100%" src="https://xd.adobe.com/embed/a42b60e7-298c-4428-a8a6-c8b95f04e482-f178/" frameborder="0" allowfullscreen> </iframe> Here is my website url: https://www.nikecba.com Thank you!!
-
Hi there, I have built a few dashboards which I have hosted on heroku, e.g. https://reviews-montage.herokuapp.com/ On my site https://www.analyticsbymark.co.uk/ I have a free member section which I want to provide access to some of the dashboards I have created. I will also create a paid member section with access to others. The apps embed great into the site using an embed block with a code injection of: <iframe src="https://reviews-montage.herokuapp.com/" width=100% height=2500 frameborder='0' scrolling='no' seamless='seamless'> (it doesn't seem to work if i just enter the URL into the embed block) The issue is that if I then inspect the page once rendered I can see the underlying url for the app hosted on heroku. It's not the end of the world but essentially as it is now someone could pay for membership, get the url, cancel membership and go around my site and straight to the underlying app. Is there a way you can save an url in say an environment within squarespace and reference that in the code injection or something? Thanks in advance for any help Mark
-
Hi! I'm a noob to codes and recently found this great site for live font previews online. They provide a code: <iframe src="https://app.fontvisual.com/showcases/048d1480-a571-4c6c-a85f-bb20cb2ff093" height="600px" width="100%" frameborder="0" allowfullscreen></iframe> But it's not responsive to the site (specifically the mobile version), when the page is looked on a phone, it moves into a contained box with a scroll bar. I feel like this will make users frustrated as majority of my customers are mobile users I'd really like to make it so that the iframe takes up the full screen as they scroll. I've tried to find a solution online, from modifying the code to 100% in height or 100vh, I've even seen people recommend putting this in the design > custom CSS: #block-yui_3_17_2_1_1619008534514_75765 iframe { height: 100vh; } But nothing has worked. Any help would be appreciated! Thanks so much!😄 -
hi I am displaying other web site content inside an iframe in my squarespace home page with below code <iframe frameborder="0" name="Live Chat" width="100%" height="300" src="https://example.com" allowfullscreen="yes" scrolling="yes"></iframe> I need to access square space home page element (span) which i have added through code block like below <span id="chat-component"></span> But when i try to access the span element by using a function inside my https://example.com it does not allow me to do that. gives me CORS error this is the complete code i have used for the above scenario // complete code placed inside squrespace home page via code block <span id="chat-component" style="width : 400px; z-index : 9999; position: fixed; right:10px; bottom:0 !important; padding: 10px; border-radius: 10px;"></span> // above element will place on bootom of the squarespace page <iframe frameborder="0" name="Live Chat" width="100%" height="300" src="https://example.com" allowfullscreen="yes" scrolling="yes"></iframe> /********************************* ANGULAR Implementation *****************************/ //on click of a button // trying to accesss the content outside ifram const parentEl = window.parent.document.getElementById('chat-component'); // Get a reference to the Angular component's factory const factory = this.componentFactoryResolver.resolveComponentFactory(ChatComponent); // Create a new instance of the component const componentRef = factory.create(this.injector); // Attach the component to the view this.appRef.attachView(componentRef.hostView); // Append the component's element to the parent element (squarespace home page span element ) parentEl.appendChild(componentRef.location.nativeElement); Above code segment gives me an CORS error below VM582:1 Uncaught DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame. at <anonymous>:1:15 (anonymous) @ VM582:1 Can anyone help to resolve above error or please advice on alternative way to address business requirement -
Hi all, I'm dropping an iframe into a site from a 3rd party: <iframe allowfullscreen="true" frameborder="0" scrolling="yes" src="https://www.agentinsure.com/compare/auto-insurance-home-insurance/gbcompany/quote.aspx" name="Secure Live Insurance Quoting" height="800px" width="100%" frameborder="0"> It shows up correctly, but when I save it, nothing below it is visible on the front end (I can still see it on the backend). There should be a map, a gallery, and the footer under the form, but you can't see any of that on the front end. If I move one of those sections above the iframe, you CAN see it. So the iframe seems to be blocking everything underneath it.... What am I doing wrong? Help! Please and thanks!
-
Hi all, My site is having an issue where a block appears when you preview the site. When editing there is none. The video is embedded on the cover page. On the desktop version, there is no space, it is just on mobile. Does anyone have any information on how to fix this?
-
Hello, Can someone please help with my booking button issue on mobile setting? - On mobile its completely mishappen/squeezed. Photo attached. On desktop its fine. I've set the embed box across whole of page so plenty of room for code. The widget is Iframe. Additional code has been created for the colours. Can this be sorted with code at all? Thanks Lorna
-
Site URL: https://finch-stingray-xe7m.squarespace.com/werkgebied My page can be viewed using this password: clogs Hi, I am trying to show a Google MyMaps iframe to load in responsive view. It should be at 100% width on both desktop and mobile view, but it is failing to do so. The code I injected is from this tutorial: https://www.w3schools.com/howto/howto_css_responsive_iframes.asp This is the code I used in the code-block: <div class="container"> <iframe class="responsive-iframe" src="https://www.google.com/maps/d/embed?mid=1z5TX60I4DPiRlBfMpn16J2iNhscPWlI&ehbc=2E312F"></iframe> </div> And this in the Custom CSS: /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ .container { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } I am no coder myself, so I followed the tutorial, but perhaps I need to set the CSS classes different for SQSP. never understand how this works for SQSP. Hopefully there is a CSS guru who know what I need to do to make it work. 😏 Thanks in advance! 🙏 Cheers, Steven
-
Site URL: https://www.dylanwhite.me/ Are there any official plans for supporting NFT integration on squarespace ? There is a workaround on one of the forums with iframes / opensea but I couldn’t seem to get it to work with IPFS. As many visual artists increasingly look to sell NFTs either via marketplaces and / or free storefront hub services such as lynkfire, linktree etc I am increasingly wondering why I pay for 2 squarespace sites. Please let me know if you’ve any NFT integration plans soon or I will probably just transfer my url to a linktree that points to hen, fnd, objkt et al. thanks again Dylan
