# Make changes dynamically

{% hint style="info" %}
Sometimes, you might want to collect your feedback and bug reports from different sources/websites into one project. More often than not, the layout and design of each source is different, so in this guide, you will learn how to customize the same button for different sites.
{% endhint %}

## 1. Select the properties you want to change 

UserHelp offer a selected amount of properties for each button that you can change. The properties are listed below:

<table><thead><tr><th width="282">Property</th><th width="219">Definition</th><th>Data type</th></tr></thead><tbody><tr><td>UserHelpButtonColor</td><td>The color of the button</td><td>any <code>Hex color code</code></td></tr><tr><td>UserHelpButtonText</td><td>The text content inside the button</td><td>any <code>String</code></td></tr><tr><td>UserHelpButtonColor</td><td>The color of the text content inside the button</td><td>any <code>Hex color code</code></td></tr><tr><td>UserHelpPlacementMode</td><td>How the button is placed</td><td><code>"automatic"</code> or <code>"manual"</code></td></tr><tr><td>UserHelpAutomaticPosition</td><td>Defines the position of the button if placement mode is set to "automatic"</td><td><p><code>"bottomRight"</code>, <code>"bottomLeft"</code>, <code>middleRight</code>, <code>middleLeft</code></p><p><code>"topRight"</code> or <code>"topLeft"</code></p></td></tr><tr><td>UserHelpManualContainerID</td><td>Defines the wrapper container's ID of the button if placement mode is set to "manual"</td><td>any <code>String</code></td></tr><tr><td>UserHelpDarkMode</td><td>Whether to render the feedback form in dark mode</td><td><code>true</code> or <code>false</code></td></tr><tr><td>UserHelpLanguage</td><td>The language used in the feedback form</td><td><code>"en"</code> (English), <code>"fr"</code> (French),<code>"es"</code> (Spanish), <code>"ar"</code> (Arabic), <code>"hi-IN"</code> (Hindi), <code>"zh-Hans-CN"</code> (Simplified Chinese)</td></tr></tbody></table>

## 2. Make your edits

After that, simply add each property that you want to change into the button by adding a new line after the `UserHelpPublicProjectID` property. Below is an example of altering a button's background color to black (i.e. #000000) even when the default button's color is something else.

<pre class="language-html" data-overflow="wrap"><code class="lang-html">&#x3C;script>
    window.UserHelpPublicProjectID="6WVGQOqqz"
    window.<a data-footnote-ref href="#user-content-fn-1">UserHelpButtonColor="#000000"</a>
&#x3C;/script>
&#x3C;script src="https://run.userhelp.co" async>&#x3C;/script>
</code></pre>

[^1]: newly added line


---

# 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.userhelp.co/advanced-usage/make-changes-dynamically.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.