Button Go to URL

Hi,

I am new here.

I am hoping to make a simple 2D button from the UI that when click will go to a URL webpage.

Is that possible ?

Thank You

Hi @Syam_Fz and welcome,

Check this thread: Link as Text element

Hi @Leonidas,

Thank you. This work very well on my computer.

What I am trying to do is on phone with below script.

var Tolink = pc.createScript(‘tolink’);

// initialize code called once per entity
Tolink.prototype.initialize = function() {

this.entity.element.on('touchstart', function(){
    var win = window.open('https://www.instagram.com/ar/701230827437789/?ch=MzQwNTZlOTNiMTZlODI1Yjg4YzQ0ZGE2ZTEyZTBiNTY%3D', '_blank');
    win.focus();
}, this);

};

But it open on chrome. Is there a way to open it in instagram application on phone ?

Thank You

Hi @Syam_Fz,

I don’t think so, you can only open new windows in the same browser your playcanvas app is running on.

It depends on how the user has set up their phone. Some may have links open in apps and some may not.

I see, Thanks

But, how are others doing the open link and then the user can choose to open with which app ?

Or is there an external software for it ?

With this code Im just getting 'cannot read property ‘focus’. Clearly I’m doing something very wrong. (I added a web address to the component attribute in the editor)
Anyone guide me?

this.link_address=Hyperlink.attributes.add('link_address', {type: 'string'});


// initialize code called once per entity
Hyperlink.prototype.initialize = function() {
    // touch events
    this.entity.element.on('touchstart', this.onPress, this);
};


// When we press the element open a web page
Hyperlink.prototype.onPress = function (event) {

    var win = window.open(this.link_address, '_blank');
    win.focus();
};

Hi @Grimmy,

It looks like you’re passing the entire attribute to the window.open() function. You should be passing just the string.

I’m not sure how the rest of your script is set up, but it should be closer to this:

var Hyperlink = pc.createScript('hyperlink');

Hyperlink.attributes.add('link_address', {type: 'string'});

// initialize code called once per entity
Hyperlink.prototype.initialize = function() {
    // touch events
    this.entity.element.on('touchstart', this.onPress, this);
};


// When we press the element open a web page
Hyperlink.prototype.onPress = function (event) {

    var win = window.open(this.link_address, '_blank');
    win.focus();
};

Then you can define the hyperlink in the editor

1 Like

Thanks, but with your exact code I get the same error…(?)

Hi @Grimmy,

Do you have a link to the project to take a look at?

Actually I think its to do with the win.focus; line. Once I remove that there is no error however my browser (CHrome) just says popup blocked and the window never opens. Is there some way around this?

Hi @Grimmy,

Without seeing how the project is set up, I will be unable to provide accurate advice

Hi, I tried adding you but it says ‘cannot add free users to private projects’. Honestly though there is nothing more than a button that opens a url. There is no other code related to this button.

Hi @Grimmy,

I put together a small example and was able to reproduce the issue. I think it may be browser related as browsers are making moves to preventing events like opening windows from occurring on touch start. Switching the event from ‘touchstart’ to ‘touchend’ solved the issue for me.

If I recall correctly, the ‘click’ event also works for touch screens, but I haven’t gone back to test it. Here is my copy:

https://playcanvas.com/editor/scene/1135984

1 Like