Articles in this category

GOOD STUFF!

Understanding the Element Selector Tool

Andrija Krstic Updated by Andrija Krstic

This article contains a detailed explanation of the element selector tool and how to use it to modify specific parts of a generated component.

What is Element Selector and where to find it?

Element selector tool is located inside the chat widget (see image below). It allows you to target specific elements on the site that the AI agent should modify.

Using the Element Selector enables the user to target a specific element it would want to make modifications to.

Let's say that you're wanting to add animated effect on a title. Instead of trying to explain to an AI agent to what part of the page/title you'd want to make modifications to, you can use the Selector to target the specific element and write a clear instruction on what needs to be done on it.

Using the visual editor

Furthermore, selecting specific element (such as paragraph, title or image), will open an in-chat editor where you can make modifications without prompting the AI agent to do that.

Visual editor is very important for optimizing the credit burn and token usage. Using the editor does not spend any credits as AI agent is not doing any work. It's suggested that the visual editor is used for applying smaller CSS changes to the selected element. More complex modifications (such as adding JavaScript animations or restructuring the layout of the section) should still be done by prompting the agent.

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free