Is it possible to create one AR template that’s dynamically updated based on URL parameters

🧑‍💻 Technical Support
1

Hi there, hope someone can help confirm if the below is possible with 8th Wall Studio and or the Pro Plan cloud editor.

Is it possible to create one AR template that’s dynamically updated based on URL parameters, enabling personalized greeting card sharing with unique links for each user.

Users will be able to add customization options like a text, photos and videos on my website which will be stored in a database and available through our API.

The AR greeting card experience will be built in 8th wall and pull the personalization options from the external API. To my knowledge so far this should be possible.

Then the part I’m unsure of and would like to understand if this is possible on the 8th wall platform. For each personalized AR greeting card experience I need to create a unique URL that has identifiers and tokens in the url to pull the personalized experience from our API to share with the recipient.

Is this something that is possible on the 8th wall platform?

Thanks in advance for the help,
Donald

2

you can use params get api, if in aframe you can create components getImage api by trigger or something i thought it just basic get api method

3

Check out the code for this sample project!

4

Thank you both for the swift reply! Looks promising, is a Pro account required for that to work or will it also be possible in Studio with custom components?

5

It uses an API from the browser so it should work in either, though I haven’t tested it in Studio projects.

6

I’ve been working through this and stuck at this point.

I’ve been trying to dynamically apply an image to an entity from a URL in a JSON file
I can get the JSON file to load and the console log to print the image url

However I can’t seem to update the Plane entity with the image url. Any thoughts on how to work through this?

Thanks in advance!

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

const {XR8} = window as any

ecs.registerComponent({
  name: 'gift-image-display',
  schema: {
    // Schema for component to hold the image URL
    imageUrl: ecs.string,
  },
  schemaDefaults: {
    // Default values for the schema, if necessary
    imageUrl: '',
  },
  data: {
    imageUrl: '',  // Data to store the URL fetched from the JSON
  },
  add: (world, component) => {
    fetch('https://thewrapsite.com/gift-api.json')
      .then((res) => res.json())
      .then((data) => {
        const gift = data[0];  // Access the first gift in the array
        component.data.imageUrl = gift.media1;  // Get the image URL from the JSON

        // Now, set the image URL to the Plane entity's material
        const planeEntity = component.el;  // Reference to the Plane entity
        planeEntity.setAttribute('material', 'src', component.data.imageUrl);  // Update the material with the image URL
      })
      .catch((e) => {
        console.error('Failed to load gift data:', e);
      });

    window.addEventListener('click', XR8.XrController.recenter);
    window.addEventListener('touchstart', XR8.XrController.recenter);
  },
  tick: (world, component) => {
    // You can add frame update logic here if needed
  },
  remove: (world, component) => {
    // Cleanup logic when the component is removed
  },
})
7

Hi!

You set the texture source on the material by accessing the Material component on the object using ecs.

Here’s an example:

ecs.Material.mutate(world, eid, (cursor) => {
  cursor.textureSrc = 'https://cdn.pixabay.com/photo/2023/03/28/09/29/tulip-7882705_1280.jpg'
})

Do that inside of your fetch request like normal and you should be good to go.

8

Thanks again @GeorgeButler, got it to work and can now update our AR scene dynamically via our api. Great support!

9

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.