Already have a great-looking Itinerary or Lookbook and want to feature it on your own website? You can show it right on a page of your site using an iFrame. Your website builder just needs the proposal's share link and a few lines of code, both below.

Step-By-Step Instructions

1. Open the Share window for your Itinerary or Lookbook, either from your Dashboard or from the Share icon while editing it. (See How do I share a Lookbook or Itinerary? if you need a refresher.)
2. Choose Copy a Link to copy the share link. Put this on a sticky note or blank document; you'll need it later.
3. Depending on what website editor you're using, follow the steps below. If using the code, replace the whole https://YOUR-SHARE-LINK-HERE with the link you just copied. Keep the quotation marks.

Code to copy and paste

<iframe
  src="https://YOUR-SHARE-LINK-HERE"
  title="Itinerary"
  width="100%"
  height="800"
  style="border:0;"
  allowfullscreen
></iframe>

You can see a working example on our Sample Embedded Proposal page.

Embedding on Wix

Option 1: Embed a Site

1. In the Wix editor, open the page where you want the proposal to appear.
2. Click Add Elements, then Embed Code, then Embed a Site.
3. Click Enter Website Address and paste your share link, then click Apply.
4. Your proposal will appear. Drag the corners of the element to make it as wide and tall as you like.
5. Click Publish, then check the live page.

Option 2: Embed HTML

1. In the Wix editor, open the page where you want the proposal to appear.
2. Click Add Elements, then Embed Code, then Embed HTML.
3. Click Enter Code, choose Code, and paste the iFrame code from above.
4. Click Update.
5. Resize the element to fit the page, then click Publish and check the live page.

Embedding on Squarespace

1. In the Squarespace editor, open the page where you want the proposal to appear and click Edit.
2. Click an insert point and choose Code from the block menu.
3. Paste the iFrame code from above into the block.
4. Click outside the block to close it, then click Save.
5. Open the live page in a new tab to check that the proposal appears.

Embedding on Other Website Builders

Most website builders have a block for custom code. Look for a block called Custom HTML, Code, Embed, or HTML, then paste the iFrame code from above. If your builder asks for a website address instead of code, paste your share link on its own.

Troubleshooting

• Why is the box blank, or why does it say "refused to connect"? Check what you embedded. Only Itineraries and Lookbooks can be embedded right now. A Content Page, Travel Dashboard, or Guest Portal link will always show a grey box.
• It's definitely an Itinerary or Lookbook link. Why is it still not working? Open the share link in a new tab on its own. If it does not load there either, the link has been deactivated or the proposal has been deleted. Copy a fresh link from the Share window.
• I'm on Squarespace and the block is empty on the live page too. Why? Squarespace only shows iFrames in a Code block on its Core, Plus, or Advanced plans. On the Personal plan, add a button that links to your share link instead.
• Nothing shows in the editor, but the live page works. Why? This is normal. Wix, Squarespace, and other website editors often do not run embedded code in the editor. Always check the published page.
• Why is the proposal cut off at the bottom? The frame needs to be taller. Increase the height="800" number in the code, or drag the element taller.
• Why does it look squeezed on a phone? Keep width="100%" so the frame fills whatever screen it is on. The proposal inside adjusts to the width it is given.
• Why are visitors asked to log in? You pasted an internal link from your Safari Portal account instead of the share link. Copy the link using Copy a Link in the Share window.
• Why do links inside the proposal do nothing? Some links inside an embedded proposal, like "view larger map," are blocked by the frame. Visitors can open the proposal in a new tab using the share link if they need them.

Tips & Tricks 💥

• Embedding does not make a copy. Any edits you make to the Itinerary or Lookbook in Safari Portal show up on your website automatically.
• If you deactivate the share link, the embedded proposal stops loading too. See Can I make a proposal link no longer viewable?
• If you have set up a custom domain, your share link will use your own domain. It embeds the same way.
• Sample Itineraries and Lookbooks are a great fit for a website, since they are built for inspiration rather than one client. Remove anything client specific before you embed a real proposal.
• Make sure you have permission from the properties and suppliers whose photos and descriptions appear in the proposal before you show it publicly on your website.
• To change the title that screen readers announce, edit the title="Itinerary" text in the code. It is not shown on the page.

Keywords: embed itinerary, embed lookbook, embed proposal, iFrame, embed on website, Wix, Squarespace, WordPress, Showit, embed code, show itinerary on my website, add lookbook to website, X-Frame-Options, refused to connect, blank embed, embed content page, embed travel dashboard, widget, HTML block, code block.