Integrate AI chatbots with SimplyEdit

Include JavaScript Libraries: Add the following script tags to your HTML file to include the necessary libraries:

<script src="/js/json-css.js"></script>
<script src="/js/simply/blog.js"></script>

Initialize the Blog Helper: After including the libraries, initialize the blog helper with the following script:

<script>
simply.blog('blog', {
    'template': 'blog.html'
});
</script>

Define Your Template: Create a template for your content. For example:

<div data-simply-list="articles" data-simply-data="blog">
    <template>
        <article>
            <a href="#" data-simply-field="data-simply-path" data-simply-content="fixed">
                <h3 data-simply-field="title">title</h3>
            </a>
            <p data-simply-field="summary">summary</p>
        </article>
    </template>
</div>

Add Custom HTML Attributes: Use data-simply-field attributes to bind your HTML elements to the data source.

Utilize the <template> Tag: Define editable components using the <template> tag, which allows for dynamic content updates without affecting the overall design.

Test Your Integration: Preview your website to ensure that the custom HTML is correctly integrated and editable as intended.