# Managing executable scripts (code snippets)

Executable scripts are an advanced AIsuru feature that lets you integrate and run code directly within conversations with your Agent. This powerful capability lets you:

* Display correctly formatted code examples;
* Execute scripts and modify the user interface in real time;
* Create interactive and dynamic experiences;
* Provide immediate technical demonstrations.

### How to add executable scripts

1. Go to your Agent's  **Contents** and create or edit a content;
2. Go to the "**Advanced: executable scripts**" section and click "+ New snippet";
3. In the panel that opens:
   1. Add a title for the code snippet;
   2. Enter the code;
   3. Decide whether to run the code on the page by enabling the "Insert in page and execute this snippet" checkbox (available only for certain languages). This checkbox lets you:
      1. Always run the snippet when the user asks exactly the same question as your content (or something close enough);
      2. Have the generative AI run the snippet (at the model's discretion).

{% hint style="info" %} <mark style="color:blue;">**The generative AI uses the snippet title to decide if and when to run it**</mark><mark style="color:blue;">. If you want the generative AI to execute your snippet, make sure to choose descriptive names and explain when to use the snippet in your prompt.</mark>
{% endhint %}

### Supported languages

You can choose from the following languages for your snippet:

|    Language    | Show snippet | Run snippet |
| :------------: | :----------: | :---------: |
|      text      |       ✅      |      ❌      |
| javascript/jsx |       ✅      |      ✅      |
| typescript/tsx |       ✅      |      ✅      |
|      json      |       ✅      |      ✅      |
|       css      |       ✅      |      ✅      |
|    html/xml    |       ✅      |      ❌      |
|      bash      |       ✅      |      ❌      |
|     python     |       ✅      |      ❌      |
|   cpp/csharp   |       ✅      |      ❌      |
|       php      |       ✅      |      ❌      |
|      ruby      |       ✅      |      ❌      |

### Practical examples

* Goal: highlight a section of the web page;
* Title: "Highlight product description";
* Language: JavaScript;
* Insert in page and run this snippet: checkbox enabled.

Code:

```javascript
window.evidenziaSezione = function(idSezione) {
    const sezione = document.getElementById(idSezione);
    sezione.style.boxShadow = '0 0 15px 5px #ffff00';
    setTimeout(() => {
        sezione.style.boxShadow = 'none';
    }, 3000);
}
```

Conversation flow:

1. User: "Where can I find the product description?";
2. Agent:
   1. "The product description is below the title, in the upper right. To help you out, I've highlighted it for a few seconds."
   2. \[Inserts and runs the 'Highlight product section' snippet]

### Benefits of using executable scripts

* Creates more dynamic and context-aware interactions;
* Improves the user experience with visual, interactive examples;
* Provides immediate and practical technical support;
* Lets you customize the user interface in real time;
* Makes it easier to demonstrate site or application features.

### Advanced snippet combinations

Snippets can be combined strategically to create more complex interactions:

#### Example: dynamic section highlighting

Imagine creating a guided experience where the Agent highlights different parts of the page during a conversation. You could set up:

1. A CSS snippet (via [opening question](/en/sharing/advanced/opening-question.md))

```css
.highlight-pulse {
  animation: pulse 2s infinite;
  border: 2px solid #6366f1;
  border-radius: 4px;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
```

2. A JavaScript snippet (in the same opening question)

```javascript
// Function to highlight the products section
function highlightProductsSection() {
    const productsSection = document.querySelector('.products-section');
    
    if (!productsSection) return; // Guard clause
    
    // Add the effect
    productsSection.classList.add('highlight-pulse');
    
    // Remove the effect after 5 seconds using requestAnimationFrame
    const startTime = performance.now();
    
    function removeHighlight(currentTime) {
        if (currentTime - startTime >= 5000) {
            productsSection.classList.remove('highlight-pulse');
            return;
        }
        requestAnimationFrame(removeHighlight);
    }
    
    requestAnimationFrame(removeHighlight);
}
```

3. A JavaScript snippet linked to the content with question "Where is the products section?"

```javascript
// Using the function
highlightProductsSection();
```

This way, when the user opens the chat:

* The CSS style is immediately injected;
* The JavaScript function for highlighting the section is defined.

When the user asks "Where is the products section?", the Agent will trigger the third snippet — and therefore the function that highlights the section.

This approach is particularly useful for:

* Interactive guided tutorials;
* Onboarding new users;
* Navigation assistance on complex pages;
* Product or service presentations.

### Important considerations

1. **Security**: when using the snippet execution option, make sure the code is safe and can't be manipulated to perform harmful actions;
2. **Transparency**: always provide a clear explanation of what the snippet does or shows;
3. **Accessibility**: not all users may see the visual effects of snippets, so always provide text-based alternatives;
4. **Performance**: avoid loading the page with too many executable snippets, which could slow down the user experience.

Smart use of executable scripts can turn your Agent into a powerful interactive support tool. Experiment with different types of snippets to create an engaging, informative, and personalized user experience — significantly improving the interaction between users and your website or application.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aisuru.com/en/agent-training/advanced/content-customization/managing-code-snippets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.