QSApp Squarespace Integration

We can integrate QSApp into Squarespace using both the iFrame and Canvas.

iFrames

Adding QSapps via iFrames involves using the Custom Code Block in Squarespace and adding iFrame code.

<iframe src=QSAPP_ID style="height:800px; width:100%"></iframe>

Be sure to set your desired height accordingly to your page.

Canvas

Canvas QSApps are the recommended approach to adding QSApps to your Squarespace site.

• In the Custom Code of a page:
  • Add the Custom CSS to correctly size the QSApp as needed.
  • Add the Code Injection, replacing the QSApp ID with your own QSApp ID.
• Edit the Squarespace Page
  • Add a Custom Code block with the QSApp div with an id of qsapp-container
  • Toggle-off "Display source code".

Be sure to save everything after editing.

Custom CSS:

/* You can set the desired height 
and width of the QSApp on the screen. 
You can also use Media Queries here to 
adjust the size of the QSApp based on 
resolution. */

#qsapp-container {
    height: 800px;
	width: 100%;
}

Custom Javascript:

<script src="https://qs.app/bundle.canvas.web.production.38bbfabab120da7a4c39.js"></script>

<script>
  const QSAPP_ID = '00cf9ed5-fca1-4544-b183-c8ed8f874ba3'; //Replace with your own QSApp ID.
  
  document.addEventListener('DOMContentLoaded', async function() {
    const container = document.getElementById('qsapp-container');
    const api = await qsapp.create(container, QSAPP_ID);
  });
</script>

Custom Code Block:

<div id="qsapp-container"></div>