# 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