Ocavu Reference Guide

Ocavu enables the usage of a custom CTA button within AR and 3D experiences. Example custom CTA buttons include:

• Add To Cart
• Find out More
• Add to Favorites

Demo

View in Your Space

Items in cart: 0

Steps for using this feature:

1. If you do not already have access to the Experiences section of portal contact Ocavu to request an account upgrade to be able to manage and create custom experiences and experience templates (contact the Ocavu team here)

2. Create a custom experience of the experience type that would like to add a CTA button to (most likely 'View'). In the Context (JSON) textarea add a cta key to the JSON with the following attributes: buttonText, buttonSuccessText, buttonErrorText. If your experience context has nothing else it would look something like:

{
        cta: {
            buttonText: 'Add To Cart',
            buttonSuccessText: 'Added To Cart',
            buttonErrorText: 'Could not add to cart'
        }
    }

Configure your Ocavu Embed to use your custom experience's "experience key" using the data-ocavu-xp attribute (see the last example in this guide)

3. To customize your CTA button you will need to make a custom Viewer UI template and update your custom experience to use the new template. In the template editor on portal you can add custom css to change the appearance and position of your CTA button. If necessary you can override the default css, js, and html of the template by checking the Override checkbox. If you choose to override and only have a few tweaks to make you can click the copy from default icon for the css, js, and html textareas and make changes as needed.

4. Add an event listener to handle the custom CTA click event (learn more about event listeners)
   Example:

    ocavu.addEventListener('ctaClicked', () => {
        console.log('cta clicked');
    })