Managing executable scripts (code snippets)

Executable scripts are an advanced 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)

The generative AI uses the snippet title to decide if and when to run it. 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.

Supported languages

You can choose from the following languages for your snippet:

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

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:

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)

.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); }
}

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

// 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);
}

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

// 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 support tool. Experiment with different types of snippets to create an engaging and personalized user experience significantly improving the interaction between users and your website or application.