Skip to main content
All CollectionsChameleon AcademyDesigning effective Experiences
Set your element IDs and classes for easy selection
Set your element IDs and classes for easy selection

Best practice: Make your code more accessible with standardized element attributes

Tiago Mota avatar
Written by Tiago Mota
Updated over a week ago

Chameleon uses on-page elements to deliver contextual Experiences to your users. Identifying the right one is essential to position and trigger your Experiences correctly. If the elements in your app aren’t easily identifiable, you can implement a standardized naming system to enable any teammate to build Experiences with Chameleon.

Chameleon works really well with various frameworks and reads your page structure to help you leverage the right element: simply point and click to select it (and easily adjust if needed). If your app structure differs, you may need to manually select some things.

In cases where elements aren’t easily identifiable by non-technical teammates, developers will often have to provide the correct element ID, or constantly update classes; this isn’t ideal if you want to move fast.

Here are some cases where identifying elements can be trickier:

🧑‍💻 Engineers can help!

To enable the whole team to boost adoption, it’s a good idea to standardize how you label your elements. Ask your engineers to ensure all have a dedicated class or ID, and that they standardize this process in the long run. This way, you enable your team to move out of guessing code lines (or updating classes) and into guiding users with clarity and efficiency.

Here’s a list of components you should cover:

  • Buttons

  • Menu items

  • Panels

  • Headings

  • Inputs

  • Labels

  • Links

Consider all the ways your users can engage with your app and how you’d want to connect with them – all those elements should be easily accessible.

Once you have this in place, your developers can focus on improving your product, and you enable anyone on your team to build Experiences with Chameleon.

Explore other topics

Did this answer your question?