The Version History tool can be implemented in the UI as a separate button that opens the Version History panel. By default, the button will display the username and time of the last saved change in a template (as in our demo example on GitHub):

But what if we want to make a different design for the button, e.g. what we see in the regular Stripo editor? As in the following screenshot:

In this case, we should use a different approach.

The initialization parameter versionHistory has, in its turn, a config parameter changeHistoryLinkId. It is changeHistoryLinkId that adds the user name/date to the button. Therefore, we should remove it from the config (along with the parameter onInitialized).

Instead, we will use the following JS API function:

window.StripoApi.toggleChangeHistoryPanel();

For example, this function can be called on mouse click, using the onclick event:

<button onclick="myFunction()">Click me</button>

----- ------ ------

<script>

function myFunction() {

window.StripoApi.toggleChangeHistoryPanel();

}

</script>

To display the "last change" info differently (e.g., as a tooltip), you can use the onChange config parameter for the parameter versionHistory, as in the following example:

versionHistory: {

onChange: (label) => console.log(label)

},

The variable label will get values ${userFullName} (in case the parameter userFullName is passed during the initialization) and ${dateTime}.

When userFullName is not passed, then it will only contain ${dateTime}.

Thank you for taking the time to read our articles. We hope you will find this information helpful.

If you have any additional questions, please email us at support@stripo.email.

We would be glad to talk with you.