Jump to content

Trigger to open users camera so they can scan QR code

Recommended Posts

Site URL: https://burgundy-onion-29xp.squarespace.com/


I'm building a very simple site, mainly for use on mobile that has a few images with hyperlinks off to various external websites.

With one of the images I want to embed code, so that when the user taps the image it triggers their camera app to open, to then enable them to scan a QR code which will take them to an external link. Does anyone know how I can do this?

By way of explanation - as a business we label clients assets with QR codes. The client can then scan the QR code with their phone and see a report about that asset.

Edited by NightM0de
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Actually, yeah. You can do this using simple HTML and enhance with Javascript if you need, or if there are permissions you need to override. Just use a code block and be sure to give your code a unique class and style as you need. This is just the prompt to open the camera.

Also, just as a warning -- I would probably blacklist the website if I were a random visitor and my camera automatically opened. This code may also throw activation errors on browsers.


  <input type="file" accept="image/*" capture="camera">   

An example of styles would look like:

  <input type="file" accept="image/*" capture="camera" style="display:block">


div {
  border: 5px solid yellow;
  padding: 1em;
  text-align: center;
  color: #fff;
  position: relative;
  width: 200px;
  height: 100px;
  background: black;

input[type="file"] { 
  width: 100%;
  height: 100%;
  opacity: 0; /* make transparent */
  z-index: 1; /* move under anything else */
  position: absolute; /* don't let it take up space */


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.