Installing Squid on a Framer Website
It only takes a few minutes to install Squid on your Framer website. Once installed, you'll be able to see how your website helps drive engagement and convert users.
Note: You'll need a Squid account to install the Squid snippet and a website created.
*
There are various ways to install Squid, and depending on your preferred choice you'll go through a few steps. After you create your Squid account and create a website, you'll have access to the website settings. You can always get back to your website settings by one of these two ways:
Go to Websites > All on the Squid side panel. Click on the pencil within a website card
OR
Clicking on the 'Settings' within your website dashboard. Setting is found by hovering over the three dots shown in the picture below.
However, most likely you are already there 😀
Copy the code snippet. This snippet is pre-populated with your unique website ID, so it's ready to go:
💡 Involving a technical teammate can be beneficial when deploying the Squid snippet, especially if you lack admin access.
Go to your Framer and click on the website that you want to add the Squid script to.
You should now be in that website's configuration screen. Click on the Framer dropdown on the top left of the dashboard.
This section will deploy the Squid script tag to all pages on your website.
In the dropdown, go to '**Site Settings**', then choose '**General**'.
Scroll down to the '**Custom Code**' section.
Add the Squid script tag that you copied above and paste it in the first block - "Start of <head> tag"
We recommend adding our script to the "Start of <head> tag" versus other parts of your webpage. This is to allow Squid to load as early as possible when someone lands on your website.
Click 'Save' button on the upper right of that section.
Click 'Publish' in the upper right corner of your screen. Then click 'Update'.
Make sure you do step 7. If you do not update and publish, the script will not be deployed on your website. Also, make sure you publish to the correct site, if you have multiple sites enabled. Finally, if you have staging turned on, you will need to do an additional step to deploy the script (see step 8)
(Optional) - If staging is enabled. Click 'Staging and Versions' on the left hand menu bar. Make sure your latest changed are 'Live'.
There are two ways to verify that your Squid installation is successful and is sending data about your users to us.
open up a web browser and go to the URL of the website where you installed the Squid snippet. If you are already there, please make sure to refresh your page.
open up dev tools by using
Mac: command+option+i
PC: ctrl+shift+i
In the console window, you will see the following if Squid is deployed correctly and connected:
First, make sure you refresh your website page with your browser to ensure the Squid snippet is loaded.
From the Squid UI, go to your current website by:
clicking websites on the left hand menu bar
clicking the pencil icon on your current website (the one in which you just installed the snippet)
Within the website settings screen, you will see the two snippet status buttons. There are 4 different button states that will inform you of the status of your snippet installation:
Not deployed: Squid does not see the snippet within your website header or app. If you see this, please make sure you reexamine your installation.
Not connected: Squid has not received a valid connection signal from the snippet within your site/app. If your snippet is deployed correctly (that is, you have a green 'deployed' button, then something is blocking the snippet's connection to our cloud, or the connection is being denied (possibly because of a domain mismatch) - see the note below.
Deployed: Squid successful discovered the snippet in your site/app code.
Connected: A successful connection was made to our cloud and we have received data.
Here are the button states, for reference:
If you are still experiencing problems with getting a successful deployment, please double-check your settings or contact us via email (<help@asksquid.ai) or the chatbot.
👉 If you install Squid on a domain that's different from the domains listed in your website settings, Squid will automatically disallow connections from the unknown/unlisted domain. This is to ensure better security and that no malicious domains get added to your account. To correct this, add the additional domain within your website settings under the 'Site' URL forms.
🔻 Will Squid work with my app? Squid works with all browser-based web products.
🔻 Does Squid work with Single Page Apps? Squid supports Single Page Applications (SPAs) and all common front-end frameworks (i.e. React, Angular, Ember, Vue, etc.).
🔻 Can I install Squid on a mobile app? Squid operates in web environments and will work within Cordova, or Electron apps as long as your app resembles a web environment.
Note: You'll need a Squid account to install the Squid snippet and a website created.
*
Installing Squid on Your Framer Website
Getting to your website settings
There are various ways to install Squid, and depending on your preferred choice you'll go through a few steps. After you create your Squid account and create a website, you'll have access to the website settings. You can always get back to your website settings by one of these two ways:
Go to Websites > All on the Squid side panel. Click on the pencil within a website card
OR
Clicking on the 'Settings' within your website dashboard. Setting is found by hovering over the three dots shown in the picture below.
However, most likely you are already there 😀
Copying the snippet
Copy the code snippet. This snippet is pre-populated with your unique website ID, so it's ready to go:
💡 Involving a technical teammate can be beneficial when deploying the Squid snippet, especially if you lack admin access.
Adding the snippet to your Framer website
Go to your Framer and click on the website that you want to add the Squid script to.
You should now be in that website's configuration screen. Click on the Framer dropdown on the top left of the dashboard.
This section will deploy the Squid script tag to all pages on your website.
In the dropdown, go to '**Site Settings**', then choose '**General**'.
Scroll down to the '**Custom Code**' section.
Add the Squid script tag that you copied above and paste it in the first block - "Start of <head> tag"
We recommend adding our script to the "Start of <head> tag" versus other parts of your webpage. This is to allow Squid to load as early as possible when someone lands on your website.
Click 'Save' button on the upper right of that section.
Click 'Publish' in the upper right corner of your screen. Then click 'Update'.
Make sure you do step 7. If you do not update and publish, the script will not be deployed on your website. Also, make sure you publish to the correct site, if you have multiple sites enabled. Finally, if you have staging turned on, you will need to do an additional step to deploy the script (see step 8)
(Optional) - If staging is enabled. Click 'Staging and Versions' on the left hand menu bar. Make sure your latest changed are 'Live'.
Verifying your installation
There are two ways to verify that your Squid installation is successful and is sending data about your users to us.
via Browser Dev Tools
open up a web browser and go to the URL of the website where you installed the Squid snippet. If you are already there, please make sure to refresh your page.
open up dev tools by using
Mac: command+option+i
PC: ctrl+shift+i
In the console window, you will see the following if Squid is deployed correctly and connected:
via Squid UI
First, make sure you refresh your website page with your browser to ensure the Squid snippet is loaded.
From the Squid UI, go to your current website by:
clicking websites on the left hand menu bar
clicking the pencil icon on your current website (the one in which you just installed the snippet)
Within the website settings screen, you will see the two snippet status buttons. There are 4 different button states that will inform you of the status of your snippet installation:
Not deployed: Squid does not see the snippet within your website header or app. If you see this, please make sure you reexamine your installation.
Not connected: Squid has not received a valid connection signal from the snippet within your site/app. If your snippet is deployed correctly (that is, you have a green 'deployed' button, then something is blocking the snippet's connection to our cloud, or the connection is being denied (possibly because of a domain mismatch) - see the note below.
Deployed: Squid successful discovered the snippet in your site/app code.
Connected: A successful connection was made to our cloud and we have received data.
Here are the button states, for reference:
If you are still experiencing problems with getting a successful deployment, please double-check your settings or contact us via email (<help@asksquid.ai) or the chatbot.
👉 If you install Squid on a domain that's different from the domains listed in your website settings, Squid will automatically disallow connections from the unknown/unlisted domain. This is to ensure better security and that no malicious domains get added to your account. To correct this, add the additional domain within your website settings under the 'Site' URL forms.
FAQ
🔻 Will Squid work with my app? Squid works with all browser-based web products.
🔻 Does Squid work with Single Page Apps? Squid supports Single Page Applications (SPAs) and all common front-end frameworks (i.e. React, Angular, Ember, Vue, etc.).
🔻 Can I install Squid on a mobile app? Squid operates in web environments and will work within Cordova, or Electron apps as long as your app resembles a web environment.
Updated on: 23/10/2024
Thank you!