How to embed a live web page into your project
Squirrel’s new Web View component (WVC) has not one, not two, but three main uses. First and foremost, it allows you to embed an interactive web page into your Squirrel project and secondly, multiple people can work on one project at the same time; and thirdly, you can create reusable components that can be used in multiple projects.
In this blog, we’ll explain how to embed a live web page into your project. We also recommend you take a look at Donald McCormick’s video Spotlight: Web View Component. We’ll explore the other two uses in a separate blog called “How to embed one Squirrel project within another.”
How does it work?
Rest assured, it’s not complicated. You’ll find the WVC in Containers in the Component Library; you simply select it, add it to the canvas and then re-size to suit.
Component Library
Now you can connect it to your chosen website URL. Let’s say you want your Squirrel project to show a basic web page, you simply enter the URL into the WVC Properties Panel or you can bind it to a cell containing the URL in the spreadsheet.
Ta dah! A web page inside your Squirrel project.
Embedding Google Maps is a brilliant example of how you might use web content.
Google Maps in Squirrel
And because it’s a fully interactive web page embedded into your project, you can interact with it just as you would if you viewed it directly in a browser. For example, you can zoom in and out of the map.
Pretty simple right?
It gets clever
The clever stuff really starts to happen when you combine Squirrel’s ability to use spreadsheet formulas with query parameters in the URL. This lets you dynamically pass information into the URL which affects what you see in the WVC on the canvas. This makes it possible for other Squirrel components to dynamically affect the contents of the WVC, such as the location the map shows or the map type i.e. a roadmap or satellite view.
Interacting with Google Maps in Squirrel
To summarise
The WVC can be as simple or as sophisticated as you like. Like other components in Squirrel, it has the ability to be driven from spreadsheet logic, which turns it into a flexible and dynamic component, especially when teamed up with other components.
What’s next
In this blog you’ve learned how to embed external content into your Squirrel project; the next blog in this series takes you even further as we look at how you can embed one Squirrel project within another. With this knowledge up your sleeve, you’ll be able to:
- Allow multiple people to work on one project at a time.
- Create reusable components that can be used in multiple projects.
The possibilities for what you can do with the WVC are endless and we’d love to hear how you use the WVC in your projects. Give us a shout on social media to share your ideas with the Squirrel community.
To learn how to configure the web view component and each of its properties, take a look at Squirrel’s knowledge base article.
