# Hyper Link from hotspot or button?
**URL:** https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281
**Category:** Technical Support
**Created:** [May 4, 2024, 7:15pm UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281 "2024-05-04T19:15:20Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@Angie\_Jones](https://forum.8thwall.com/u/Angie_Jones)
#### Post date: [May 4, 2024, 7:15pm UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/1 "2024-05-04T19:15:20Z")
I have looked and looked all over the projects. is there a way to create a hotspot or button or even a trigger off a .glb asset to go to a website? I would like to trigger off my skulls to the shopify site to buy them.
Thanks for all that you do!!!
Ang
---
### Author:  [@Angie\_Jones](https://forum.8thwall.com/u/Angie_Jones)
#### Post date: [May 5, 2024, 7:40pm UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/2 "2024-05-05T19:40:04Z")
Still trying to get this to work before I release the AR to the public. š¶
So I found the ability to capture the image looking for a button to click and have added that to one of my skullās AR hereā¦
> **[After Life Hot Pink | Angie Jones | 8th Wall](https://www.8thwall.com/stixandjones/afterlife-p)**
>
> Afterlife Skull Sculpture 3d Print - Hot Pink comes to life!
And capture works great which is a fun addition, but you can see I added a simple button - buy it, but I cannot get it to link to this - [https://bit.ly/skullsculpts](https://bit.ly/skullsculpts)
I think I added all of the code correctly and this is in the app.js
import ā./main.cssā
AFRAME.registerComponent(ābuttonā, {
init() {
const btn = document.getElementById(āmyButtonā)
btn.addEventListener(āclickā, () =\> {
window.open(ā[https://bit.ly/skullsculpts](https://bit.ly/skullsculpts)ā, ā\_blankā)
})
},
})
What the heck am I doing wrong here?
Also, I have 12 skulls that once I get this working would like to add this functionality toā¦ is there an easy way to do that other than manually copy paste into each skull code?
Thanks,
Angie
---
### Author:  [@Ian](https://forum.8thwall.com/u/Ian)
#### Post date: [May 6, 2024, 9:25pm UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/3 "2024-05-06T21:25:59Z")
Are you testing this on a mobile device? Or the simulator?
I got this working
```auto
const buttonBehaviorComponent = {
init() {
const btn = document.getElementById('btn')
const handleClick = () => {
console.log('click')
window.open('https://www.8thwall.com', '_blank')
}
btn.addEventListener('click', handleClick)
},
}
export {buttonBehaviorComponent}
```
---
### Author:  [@Ian](https://forum.8thwall.com/u/Ian)
#### Post date: [May 6, 2024, 9:27pm UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/4 "2024-05-06T21:27:42Z")
Just a simple added line from our simple button sample project here:
> **[A-Frame: Simple Button | 8th Wall Playground | 8th Wall](https://www.8thwall.com/playground/simple-button)**
>
> This project demonstrates how to add a 2D button / UI element to your WebAR experience.
---
### Author:  [@Angie\_Jones](https://forum.8thwall.com/u/Angie_Jones)
#### Post date: [May 7, 2024, 12:22am UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/5 "2024-05-07T00:22:50Z")
OMG I love you. You are hired! I could not figure out that one line!!! š¤© š š«
---
### Author:  [@Angie\_Jones](https://forum.8thwall.com/u/Angie_Jones)
#### Post date: [May 7, 2024, 12:28am UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/6 "2024-05-07T00:28:47Z")
If I want to make a second button, can I do this?
const buttonBehaviorComponent = {
init() {
const btn = document.getElementById(ābtn2ā)
```
const handleClick = () => {
console.log('click')
window.open('https://www.stixandjones.com', '_blank')
}
btn.addEventListener('click', handleClick)
```
},
}
export {buttonBehaviorComponent}
---
### Author:  [@Angie\_Jones](https://forum.8thwall.com/u/Angie_Jones)
#### Post date: [May 7, 2024, 12:43am UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/7 "2024-05-07T00:43:36Z")
hmm that is not workingā¦
---
### Author:  [@Angie\_Jones](https://forum.8thwall.com/u/Angie_Jones)
#### Post date: [May 7, 2024, 2:06am UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/8 "2024-05-07T02:06:25Z")
I keep trying and I know I am close but this now clicks only the second button
How do I get two buttons in there?
//button01
const buttonBehaviorComponent = {
init() {
const btn = document.getElementById(ābtnā)
```
const handleClick = () => {
console.log('click')
window.open('https://stixandjones.myshopify.com/products/hot-pink-afterlife-skull', '_blank')
}
btn.addEventListener('click', handleClick)
```
},
//button02
init() {
const btn = document.getElementById(ābtn2ā)
```
const handleClick = () => {
console.log('click')
window.open('https://stixandjones.com', '_blank')
}
btn.addEventListener('click', handleClick)
```
},
}
export {buttonBehaviorComponent}
---
### Author:  [@Ian](https://forum.8thwall.com/u/Ian)
#### Post date: [May 7, 2024, 5:04pm UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/9 "2024-05-07T17:04:16Z")
How many buttons do you want? If it is just two, you can create two seperate components.
So `button-behavior.js`
```auto
const buttonBehaviorComponent = {
init() {
const btn = document.getElementById('btn')
const handleClick = () => {
console.log('click')
window.open('https://www.8thwall.com', '_blank')
}
btn.addEventListener('click', handleClick)
},
}
export {buttonBehaviorComponent}
```
Then `button-behavior2.js`
```auto
const buttonBehaviorComponent2 = {
init() {
const btn2 = document.getElementById('btn2')
const handleClick = () => {
console.log('click')
window.open('https://www.8thwall.com/projects', '_blank')
}
btn2.addEventListener('click', handleClick)
},
}
export {buttonBehaviorComponent2}
```
Then register these both in app.js
```auto
import {buttonBehaviorComponent} from './button-behavior'
AFRAME.registerComponent('button-behavior', buttonBehaviorComponent)
import {buttonBehaviorComponent2} from './button-behavior2'
AFRAME.registerComponent('button-behavior2', buttonBehaviorComponent2)
```
Then make sure add the components into your scene
```auto
```
---
### Author:  [@Angie\_Jones](https://forum.8thwall.com/u/Angie_Jones)
#### Post date: [May 7, 2024, 5:24pm UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/12 "2024-05-07T17:24:08Z")
this is the ascene
\
### Author:  [@Angie\_Jones](https://forum.8thwall.com/u/Angie_Jones)
#### Post date: [May 7, 2024, 5:39pm UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/13 "2024-05-07T17:39:39Z")
OK after testing I got everything to work except the second button urlā¦
I land/pub it so you can see
> **[After Life Hot Pink | Angie Jones | 8th Wall](https://www.8thwall.com/stixandjones/afterlife-p)**
>
> Afterlife Skull Sculpture 3d Print - Hot Pink comes to life!
These are my two buttons in the body
buy it!
website
I have this in the a scene
button-behavior
button-behavior2\>
and these in app.js
import {buttonBehaviorComponent} from ā./button-behaviorā
AFRAME.registerComponent(ābutton-behaviorā, buttonBehaviorComponent)
import {buttonBehaviorComponent2} from ā./button-behavior2ā
AFRAME.registerComponent(ābutton-behavior2ā, buttonBehaviorComponent2)
---
### Author:  [@Angie\_Jones](https://forum.8thwall.com/u/Angie_Jones)
#### Post date: [May 7, 2024, 5:45pm UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/14 "2024-05-07T17:45:49Z")
OMG I fixed it!!!
The const needed a ā2ā for the doc btn!!!
const buttonBehaviorComponent2 = {
init() {
const btn2 = document.getElementById(ābtn2ā) \<----------------------
```
const handleClick = () => {
console.log('click')
window.open('https://www.8thwall.com/projects', '_blank')
}
btn2.addEventListener('click', handleClick)
```
},
}
export {buttonBehaviorComponent2}
THANK YOU IAN!!!
---
### Author:  [@Angie\_Jones](https://forum.8thwall.com/u/Angie_Jones)
#### Post date: [May 7, 2024, 8:30pm UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/15 "2024-05-07T20:30:12Z")
Unsure if I should post this here since there is history but one more questionā¦
When you go to any of my skull projects on 8th wall like this pink skull -
[stixandjones.8thwall.app/afterlife-p/](https://stixandjones.8thwall.app/afterlife-p/%7C)
And you use your finger to drag or scale the skullsā¦
1. the start to pop on and off
2. their eyes start to glow a different color if you go off screen and then look at them again (kind of kewl, but not on purpose)
3. the shadows seem wrong too
Is the code for the button colors or highlight interfering with the gesture?
Thanks again for always helping,
Ang
---
### Author:  [@Ian](https://forum.8thwall.com/u/Ian)
#### Post date: [May 7, 2024, 8:31pm UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/16 "2024-05-07T20:31:33Z")
please ask any new questions on a new post.
---
### Author:  [@Zita\_Cheung](https://forum.8thwall.com/u/Zita_Cheung)
#### Post date: [March 25, 2025, 3:09pm UTC](https://forum.8thwall.com/t/hyper-link-from-hotspot-or-button/1281/17 "2025-03-25T15:09:51Z")
helloļ¼I use the hotspot button in VPS template project, then there is a bug show that ā {getPositionInfo: [Function: function(t){var n=t.href,o=function(e){var t=document.querySelectorAll(āiframeā),n=e.replace(/^https?:/,āā);return Array.from(t).filter((function(t){var o=t.getAttribute(āsrcā);return[e,n].includes(o)}))[0]}(n),r=o&&o.getBoundingClientRect();e.requestSubFrame(n,{api:āsetPositionInfoā,payload:{href:n,positionInfo:r}})}]} falseļ¼ may i ask how to Modify the codeļ¼ thanks