How to Insert an Your SoftCloud iframe into Your Website
If you need a booking engine but have an existing website and don’t want to use SoftCloud IBE to build a brand new site, you can add a booking engine to your existing site as an iframe.
In general, an iframe (inline frame) allows you to embed another web page within your current HTML document. It’s commonly used for displaying external content, such as maps, videos, or widgets, directly on your webpage. In our case we are going to use it to add a search box to an existing site. Let’s dive into the steps:
1. The Basic Syntax (HTML Code)
The basic syntax for adding an iframe to your web page is as follows:
<iframe src=”SOFTCLOUD URL”></iframe>
Replace “SOFTCLOUD URL” with the actual web address of the content you want to embed. For example, if you want to display a map from Google Maps, you’d use:
2. Customize the Iframe
You can adjust the iframe’s appearance and behavior using additional attributes:
Width and Height: Set the dimensions in pixels using the width and height attributes.
Title: Always include a title attribute for accessibility (screen readers).
Sizing: Use the width and height attributes to set the szie of any iframe, you can either use a fixed size or use the percentage e.g. 80% or 100% to make the iframe a certain size relative to the space it is in.
Styling: Use the style attribute to apply CSS properties such as borders. For example:
HTML CODE
<iframe src=”SOFTCLOUD URL” width=”100%” height=”100%” title=”My Flight Search” style=”border:none;”></iframe>
Remember to replace “SOFTCLOUD URL” with the unique url that we give you when we create your search box and booking engine.
Happy framing!