Hyper Link from hotspot or button?

Technical Support
1

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

2

Still trying to get this to work before I release the AR to the public. :sunglasses:

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…

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

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’, ‘_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

3

Are you testing this on a mobile device? Or the simulator?

I got this working

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}
4

Just a simple added line from our simple button sample project here:

5

OMG I love you. You are hired! I could not figure out that one line!!! :star_struck: :innocent: :melting_face:

6

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}

7

hmm that is not working…

8

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}

9

How many buttons do you want? If it is just two, you can create two seperate components.

So button-behavior.js

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

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

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


<a-scene
landing-page
xrextras-loading
xrextras-runtime-error
xrextras-gesture-detector
xrweb="allowedDevices: any"
button-behavior
button-behavior2>
12

this is the ascene

<a-scene
splash-image
xrextras-gesture-detector
landing-page
xrextras-loading
xrextras-runtime-error
custom-capture-btn
xrextras-tap-recenter
renderer=“colorManagement: true”
xrweb=“allowedDevices: any”
button-behavior
button-behavior2

13

OK after testing I got everything to work except the second button url…
I land/pub it so you can see

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)

14

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!!!

1 Like
15

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/

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

16

please ask any new questions on a new post.

1 Like
17

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