# User Defined Content

**URL:** https://forum.bootstrapstudio.io/t/user-defined-content/9869
**Category:** Bootstrap Studio Help
**Created:** [January 22, 2023, 11:15pm UTC](https://forum.bootstrapstudio.io/t/user-defined-content/9869 "2023-01-22T23:15:57Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![eamjan](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/e/e5b9ba/32.png) [@eamjan](https://forum.bootstrapstudio.io/u/eamjan)
#### Post date: [January 22, 2023, 11:15pm UTC](https://forum.bootstrapstudio.io/t/user-defined-content/9869/1 "2023-01-22T23:15:58Z")

</div>

Hi all,

Need a little direction.

We do fairly basic static websites for our clients and Bootstrap Studio is proving fantastic for that. We don’t code. We are not super sophisticated users. Our websites are not hosted with Bootstrap but rather with our own choice of web hosting service.

At present, for each website we build, we write all the content, (product descriptions, a single place in the header where the price of the product shows, etc). What we would love to be able to do is to give our clients the option to input (and change as required) some bullet point descriptions of the product and allow them to change the price as needs be and for it to appear on the live website immediately. (ie: without any involvement from us).

In one particular website, we have used a Google Sheet, embedded in the website, and we give the client access to the Google Sheet and they update content as they please and it shows on the live website immediately. This works for this particular client but it is not elegant. It looks, as you’d imagine, like a Google Sheet embedded in a website rather than it feeling like a natural part of the website.

Can anyone think of a simple method for us to convert the content of a Google Sheet to html that would display naturally on a live, static website, or can anyone think of an alternative method that we could use to allow end users to alter website content in such a way. Whatever the solution, it needs to be relatively simple for us to implement but even more so, easy to explain to an end user.

I did search but couldn’t find any relevant posts. Any help/pointers/ideas greatly appreciated.

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [January 23, 2023, 11:20am UTC](https://forum.bootstrapstudio.io/t/user-defined-content/9869/2 "2023-01-23T11:20:46Z")

</div>

I am not an expert on the subject, but what you’re basically describing is a CMS (content management system.) Traditionally, websites that employ content management systems need to have some “dynamic” ability - meaning the updateable content is generated “on the fly” by code that runs on the server. This code queries a database, and the contents of that database are entered only by users who access to the database via user accounts with logins and passwords. This is the basic description of a content management system.

The most popular and widely used CMS is WordPress. WordPress uses PHP (the server-side programming language) and MySQL (the database) to generate the dynamic content on its websites. The “front end” of a WordPress website is usually built using traditional HTML and CSS. This portion of the website is referred to as “the theme.”

So when we talk about a Bootstrap Studio generated website vs a WordPress generated website, we’re talking about a “static” website, vs a “dynamic” (or database-driven) website.

Other than the recently added Reflow e-commerce feature, Bootstrap Studio does not offer any dynamic features. Your idea of using a Google Sheet embedded in a page to which your customer has access is really not practical (or secure.) You need some sort of CMS running on your static Bootstrap Studio website if you want clients to be able to login and edit dynamically generated content.

Although I have not had any experience using them, there are what are called “flat file” CMS systems which do not use databases, and which can be incorporated into static websites, that I believe would provide a solution to your problem. There are other Forum members who know more about these systems than I do, so I’d wait to see if anyone else replies to your post, but in the interim, you can Google search for “flat file CMS” and you’ll find there are many options available (some free, and many paid.)

Hope this gets you started.

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [January 23, 2023, 11:32am UTC](https://forum.bootstrapstudio.io/t/user-defined-content/9869/3 "2023-01-23T11:32:11Z")

</div>

Did a quick search and found this

> **[Simple CMS for static websites | lightweight | flat file | jocms](https://jocms.net/)**
>
> Want to add a CMS to your existing website? jocms is a lightweight simple CMS for static websites in HTML and PHP. Try it out - it’s free!

---

<div class="post-metadata">

### Author: ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)
#### Post date: [January 23, 2023, 1:26pm UTC](https://forum.bootstrapstudio.io/t/user-defined-content/9869/4 "2023-01-23T13:26:15Z")

</div>

Instead of using a google sheet, use a google doc for each page.

Create a page on google docs add your text, then File\>Share\>Publish to Web

Copy the link in the publish to web dialog box

then in bss add the following js:

```auto
 

fetch('<URL to google doc>').then(function (response) {
 	return response.text();
}).then(function (html) {

 	var parser = new DOMParser();
	var doc = parser.parseFromString(html, 'text/html');
 	var content = doc.querySelector('.doc-content').innerHTML;
	 
document.getElementById("showcontent").innerHTML = content;

}).catch(function (err) {
	console.warn('Something went wrong.', err);
});

```

Create a div with the ID of showcontent where you want the content to show.

Updated code is now here:

> [@A very simple CMS using google docs and BSS](https://forum.bootstrapstudio.io/t/a-very-simple-cms-using-google-docs-and-bss/9875):
>
> Following on from an earlier post ([User Defined Content](https://forum.bootstrapstudio.io/t/user-defined-content/9869)), I expanded my code to create a very simple CMS using google docs to allow the client to edit the page. Setup: Google Docs: Create a doc for each page you want to manage, add your text, then File\>Share\>Publish to Web Copy the link in the publish to web dialog box to be added to the relevant gdoc in the javascript Bootstrap Studio In your bss page create an empty heading element with an ID of showtitle, and an empty div with an ID of s…

---

<div class="post-metadata">

### Author: ![eamjan](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/e/e5b9ba/32.png) [@eamjan](https://forum.bootstrapstudio.io/u/eamjan)
#### Post date: [January 23, 2023, 8:24pm UTC](https://forum.bootstrapstudio.io/t/user-defined-content/9869/5 "2023-01-23T20:24:27Z")

</div>

Huge thanks to printninja and richards for your helpful and constructive input. We really appreciate it and we will go and explore the ideas that you have put forward.

---

<div class="post-metadata">

### Author: ![fynn](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/f/ecc23a/32.png) [@fynn](https://forum.bootstrapstudio.io/u/fynn)
#### Post date: [January 24, 2023, 7:48pm UTC](https://forum.bootstrapstudio.io/t/user-defined-content/9869/6 "2023-01-24T19:48:20Z")

</div>

Nice find. That looks pretty useful and easy to implement. Will give that one a try.

---

<div class="post-metadata">

### Author: ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)
#### Post date: [January 24, 2023, 9:13pm UTC](https://forum.bootstrapstudio.io/t/user-defined-content/9869/7 "2023-01-24T21:13:48Z")

</div>

I tried jocms out last year, it was quite buggy and had a few security issues. So test on a dummy site.

I might give it another go, see if it has improved

---

<div class="post-metadata">

### Author: ![fynn](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/f/ecc23a/32.png) [@fynn](https://forum.bootstrapstudio.io/u/fynn)
#### Post date: [January 25, 2023, 9:51am UTC](https://forum.bootstrapstudio.io/t/user-defined-content/9869/8 "2023-01-25T09:51:15Z")

</div>

Looks like the developer stopped further development due to lack of time… unless someone else picks this up it seems like a dead end. Pity really.

> **[GitHub - mxgbr/jocms: jocms - A Simple CMS for Easy Editing](https://github.com/mxgbr/jocms)**
>
> jocms - A Simple CMS for Easy Editing. Contribute to mxgbr/jocms development by creating an account on GitHub.

---

<div class="post-metadata">

### Author: ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)
#### Post date: [January 25, 2023, 10:21am UTC](https://forum.bootstrapstudio.io/t/user-defined-content/9869/9 "2023-01-25T10:21:02Z")

</div>

Yes, its a shame as it did have potential, I was originally looking for an open-source alternative to cushycms.

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [January 25, 2023, 11:52pm UTC](https://forum.bootstrapstudio.io/t/user-defined-content/9869/10 "2023-01-25T23:52:01Z")

</div>

Not my area of expertise, but there do seem to be quite a few open source flat file CMS’s out there…

> **[A List of the Best Flat File CMS - CMS Critic](https://www.cmscritic.com/flat-file-cms/)**
>
> A flat–file CMS is a platform that  does not require a database but rather, saves it's data to a set of text  files. There are many advantages to using
