Displaying website within vuforia studio

[Aditya1702]

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.

[Mohit_Kabra27]

Hello @Aditya1702 ,

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

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

[Aditya1702]

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.

[Mohit_Kabra27]

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';
}

I hope this will help you

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

BR,

Mohit Kabra

[Aditya1702]

Hi  @Mohit_Kabra27 ,

I had tried the above method mentioned by you but the problem I faced was after the website/url is opened & when I go back it asks me to relocate the Lab area as I'm using area target. So, is there any method to open the website in a small window inside the AR experience? so that after viewing the website one can close the website window present inside the AR experience.

Thanks in Advance.

Regards,

Aditya Gupta.

[KS_9982057]

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 = '';

[Aditya1702]

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.

Thanks in advance.

Regards,

Aditya Gupta.

[KS_9982057]

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.

[Aditya1702]

Hi @KS_9982057 ,

I am not familiar with x-frame-options so can you please let me know how to remove header from the servers response & will it affect our network?

Thanks in advance.

Regards,

Aditya Gupta.

[KS_9982057 · Accepted solution]

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.

[Aditya1702]

Hi @KS_9982057 ,

Thanks a lot for your quick response, also I had a doubt, if we use window.location to open the url in a new window can we resize that window?

Thanks in advance.

Regards,

Aditya Gupta.

[GianVal]

Did you find the correct solution?

[Aditya1702]

Hi @GianVal ,

No, I haven't find the correct solution yet.

Thanks & Best Regards

Aditya Gupta