Hi! How can I add a CTA button to my existing project?

🧑‍💻 Technical Support
1

Hi! I am implementing a image target AR project, and want to show a CTA button that links to a page. Any resources on how I can achieve that?

Thanks!

2

Hi, welcome to the forums!

If you take a look at the Studio: Spatial Audio Sample project you’ll notice it has a 3D button you can click to start and stop audio that’s attached to the radio model.

We can take this example and modify it so that instead of using a state machine we simply attach a listener to the button that listens for a click or touch and opens a link using javascript.

Here’s an example:

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'cta',
  schema: {
  },
  schemaDefaults: {
  },
  data: {
  },
  add: (world, component) => {
    world.events.addListener(component.eid, ecs.input.SCREEN_TOUCH_START, (e) => {
      window.open('https://google.com', '_blank')
    })
  },
  tick: (world, component) => {
  },
  remove: (world, component) => {
  },
})
3

:gift: