Integration
To integrate this widget into your webpage, follow these steps:
- Copy and paste the HTML code snippet below into your page:
<script async src="https://huggingcat-web.pages.dev/mywidget.js?static=true"></script>
<script>
window.hc_config = {
buttonAlign: "center",
language: "en",
projectName: "demo_project"
};
</script>The <script> tag can be placed anywhere in the HTML document, whether it's in the <head> , <body> , or even within a <div>. We recommend to add it into <head> tag.
2. Configure button alignment
The buttonAlign option can be set to 'left', 'right', or 'center'. For optimal performance, center alignment is recommended. The button has a 20px padding from the bottom.
3. Language Setting
This configures the button text and onboarding process. Currently, the only available language option is 'en', with more languages to be added by requests. So if you need new one, please get in touch.
4. Project Setting
"projectName: 'demo_project' – replace 'demo_project' with the name of your project, which you will receive by email after signing up.
5. [Optional] Layer Positon
zIndex property controls the stacking order of positioned elements that may overlap on a web page. It determines which elements are displayed in front of or behind other elements along the z-axis (the axis perpendicular to the screen). By default it is 7483647 (above lot's of elements), but you can set your value.
6. [Optional] Bottom Positon
The bottom property is used to position an element vertically from the bottom edge of the screen block. By default it is 28px, but you can set your value.
7. [Optional] Container Setting
Add the container selector where you want the widget to appear. You can include parameter container: "%CONTAINER%" with the selector of the container in a section with buttonAlign and language. Containers usually starts with # at the beginning. If omitted, the widget will use the default container.
2. Configure button alignment
The buttonAlign option can be set to 'left', 'right', or 'center'. For optimal performance, center alignment is recommended. The button has a 20px padding from the bottom.
3. Language Setting
This configures the button text and onboarding process. Currently, the only available language option is 'en', with more languages to be added by requests. So if you need new one, please get in touch.
4. Project Setting
"projectName: 'demo_project' – replace 'demo_project' with the name of your project, which you will receive by email after signing up.
5. [Optional] Layer Positon
zIndex property controls the stacking order of positioned elements that may overlap on a web page. It determines which elements are displayed in front of or behind other elements along the z-axis (the axis perpendicular to the screen). By default it is 7483647 (above lot's of elements), but you can set your value.
6. [Optional] Bottom Positon
The bottom property is used to position an element vertically from the bottom edge of the screen block. By default it is 28px, but you can set your value.
7. [Optional] Container Setting
Add the container selector where you want the widget to appear. You can include parameter container: "%CONTAINER%" with the selector of the container in a section with buttonAlign and language. Containers usually starts with # at the beginning. If omitted, the widget will use the default container.