16-Pearl

Solved

Displaying website within vuforia studio

Forum|Forum|3 years ago
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.

Coding

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.

M

Mohit_Kabra27

5-Regular Member

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

A

Aditya1702

Author

16-Pearl

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.

M

Mohit_Kabra27

5-Regular Member

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

K

KS_9982057

7-Bedrock

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&colon;

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

A

Aditya1702

Author

16-Pearl

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).png Screenshot (119).png