Skip to main content
16-Pearl
May 23, 2022
Solved

Displaying website within vuforia studio

  • May 23, 2022
  • 2 replies
  • 4905 views

Hi all,

I want to display website within the vuforia studio experience. Also, I should be able to close the website & continue viewing the AR experience. Can anyone please help me out with this.

Thanks in advance.

 

Regards,

Aditya.

Best answer by KS_9982057

Hi @Aditya1702,

I'm afraid I can't help you with that. That depends heavily on your backend architecture.
Your website administrator may be able to help you with this.

2 replies

5-Regular Member
May 23, 2022

Hello @Aditya1702 ,

You can display a website using the Hyperlink widget and entering the URL as shown below:

MK_10166888_0-1653307100707.png

Once you close the website(tab on back button), you will be back to the AR experience and you won't need to scan again

I am not sure if one could have a website open and AR exp going on simultaneously on Mobile/Tablets. If its the HoloLens then it can be achieved.

 

I hope this helps you

 

 

16-Pearl
May 23, 2022

Hi @Mohit_Kabra27 ,

Thanks a lot for your kind reply,

It would be nice if you could let me know whether we can have AR experience and website going on simultaneously on Mobile/Tablets and can we have the website displayed in a small popup/window within the AR experience.

Also, I want to open the website on the click event of image widget in vuforia studio, how should I go about this.

Thanks in advance.

 

Regards,

Aditya Gupta.

5-Regular Member
May 23, 2022

Hi @Aditya1702 ,

 

To open a website using click event of image widget, you can use the below code and call the function on click event as shown below:

 

$scope.webpg = function(){
window.location='https://www.google.com';
}

 

MK_10166888_0-1653308354861.png

I hope this will help you

 

Regarding, to have both simultaneously, as far as i know it is not possible 

 

BR,

Mohit Kabra

 

 

7-Bedrock
May 24, 2022

Hi Aditya,

 

there is a hacky way to add an iframe to a vuforia studio experience:

 

Add a 2D Label to your view.

Add the following code in your views javascript:

var iframeLabel = document.querySelector("[widget-id='label-1']");
iframeLabel.innerHTML = `<iframe src="https://example.com/" style="width: 100%; height: 100%"></iframe>`;

Replace "label-1" in the first line with the id of your 2d Label.

Replace "https://example.com/" with your websites url.

 

To hide the iframe you can simply remove the labels content:

iframeLabel.innerHTML = '';

 

16-Pearl
May 25, 2022

Hi @KS_9982057 ,

As suggested I tried the above method but it still didn't work, I may be doing it wrong way so below are the screenshots do guide me if I've done it in the wrong way.

 

Screenshot (118).pngScreenshot (119).png

Thanks in advance.

Regards,

Aditya Gupta.

7-Bedrock
May 25, 2022

Hi @Aditya1702,

 

your website responds with a x-frame-option header, which is set to "sameorigin".

This disallows the embedding on a different domain. (See more on https://developer.mozilla.org/de/docs/Web/HTTP/Headers/X-Frame-Options)

The easiest solution would be to remove the header from the servers response.

 

KS_9982057_0-1653459962927.png