Hey there,
I’ve got my project up and running on the live server, but the QR codes from Mappedin are directing me to blank screen. My project is on the Mappedin web version.
Could you please help me figure out what’s going on with the QR codes?
Thanks!
Hi Nancy,
Welcome to the forum.
How are the QR codes being generated? Can you share an example URL from one of them?
Mark
This is the relevant part from my main.ts:
import QRCode from ‘qrcode’;
const options = {
key: “my key”,
secret: “my secret”,
mapId: “my map”,
};
const qrImgEl = document.getElementById('qr') as HTMLImageElement;
function generateQRCode(url: string, qrImgEl: HTMLImageElement) {
QRCode.toDataURL(url, { type: 'image/jpeg', margin: 1 }, (err: Error | null | undefined, dataUrl: string) => {
if (err) {
console.error("Failed to generate QR code:", err);
} else {
qrImgEl.src = dataUrl;
}
});
}
const qrUrl2 = `https://app.mappedin.com/map/<mymapId>1?/location=<locationId>?&floor=<my-floor-Id>`;
generateQRCode(qrUrl2, qrImgEl);
I’ve generated a QR code to link to a specific location on my map and it works now, but when I scan the code, it redirects me to the free version of Mappedin’s map instead of my Mappedin Pro map hosted on a live server.
The issue seems to be that the link is pointing to a Mappedin URL, but it’s not reflecting the hosted version. I have tried replacing app.mappedin.com with the link where it is hosted but there is an error. Could someone help me understand why this is happening and how I can ensure the QR code directs to my hosted map?
Thanks in advance!
This could be a copy and paste typo, but there is a 1 after <mapId> in the URL, which shouldn’t be there.
How are you hosting the map on your own server? Are you embedding the viewer or using the Mappedin SDK? If you are looking for a full map experience out of the box you can embed the viewer. If you are building something custom then the Mappedin SDK is the tool for the job. When using the SDK, the URL parameters won’t be supported out of the box. That is something you’d need to build into the page.
Can you share the error you receive when using your own URL? Are you able to open the map on your server without using the QR code?
Thanks for getting back to me!
Thank you!
From the example code you pasted above, you will need to replace the full URL including app.mappedin.com with your own domain. You mention you tried that but got an error. Was it an error generating the QR code or after reading the QR code? What is the exact error?
Custom Domain: I replaced app.mappedin.com with my own domain in an attempt to integrate the QR codes with my custom map experience.
Error Encountered: After making this change, I received an error saying “URL not found”. This suggests that the page hosted on my domain doesn’t recognize or handle the URL parameters correctly.
Suspected Cause: I suspect the issue might be related to URL parameters not being properly integrated or recognized on the custom domain. It seems that the page or the server at my domain might not be set up to handle these parameters as app.mappedin.com does. Wha would be the best way to resolve this?
“URL not found” does not relate to the URL parameters, but to the path and name of the page itself. You need to modify both the hostname and path to your page.
Ignore the URL parameters for now, which start after the ? in the URL. If your page is as https://www.yoursite.com/yourFolder/yourPage.html then you have to use that full path in the QR code.
Then, if you wish to add and support URL parameters, you could add them like:
https://www.yoursite.com/yourFolder/yourPage.html?urlParameterName=urlParameterValue
Thank you for your help earlier. I wanted to clarify the issue I’m facing. My current setup only allows the QR code to direct users to the base URL, like https://www.mysite.com. Unfortunately, it doesn’t support reading or interpreting any additional URL parameters, such as locationId or names that would usually follow the ? in a URL.
So, when someone scans the QR code, they’re taken to the main page instead of a specific section or location on the map. Even when I run the map locally, the URL doesn’t recognize any locationId or other parameters—it’s always just http://localhost:5173/ or 'https://my.app.com/, no matter where I click on the map. The spaces are clickable, and the navigation path is working, but the URL isn’t reflecting these interactions.
That’s the expected behaviour when using the Mappedin SDK. It allows you to display a map and then build whatever functionality you desire in your app. To support URL parameters used by the Mappedin Viewer, you could need to build this into your app.
Alternatively you can embed the Mappedin Viewer into your own web page and make use of its deep linking capabilities. But then you can’t customize the experience like you can when using the SDK.
There are two products that could be used, it depends if you want the out of the box solution that isn’t customizable or if you want to build your own custom solution.
Thank you for the information!
I am indeed aiming to build a custom solution with the MappedIn SDK, rather than using the out-of-the-box MappedIn Viewer. I understand that integrating URL parameters into the SDK will allow for more tailored functionality.
To clarify, I would like to know how to handle URL parameters within my custom implementation. Specifically:
Thank you for any guidance or resources you can provide!
There isn’t anything specific to the Mappedin SDK as far as using URL parameters. You could read them using JavaScript (or whatever web technology you are using to build your app) and then use them in the SDK the same as any other variable.
We do have a guide on Wayfinding using Mappedin Web SDK, which can help you create and display directions. It should help you get started with that.