Systeme io Widgets

Table Configuration ℹ️

Number of Rows:

Number of Columns:

Quick Templates

Pricing

Comparison

Features

Schedule

Import Data

Paste from Spreadsheet (TSV/CSV):

Import/Export Table Data:

Saved Tables

Generated Code

Live Preview

Generate code to see a live preview of your table.

Dark Mode Toggle Settings

Toggle Style:

Position:

Light Mode BG Color:

Dark Mode BG Color:

Light Mode Text Color:

Dark Mode Text Color:

Toggle Button Color:

Remember User Preference:

Preview Instructions

Static Preview: Shows the toggle button style and position.

Live Preview: After generating code, click the "Live Preview" tab to test the full functionality with background color changes.

Saved Configurations

No saved configurations yet

Toggle Preview (static preview)

Dark Mode Toggle Preview

Configure your settings to see the toggle style and position.

Generated Code

Live Preview

Generate code to see a live preview of your dark mode toggle.

Back to Top Button Settings

Button Style:

Position:

Button Color:

Hover Color:

Icon Color:

Button Size:

50px

Icon:

Show Text:

Button Text:

Scroll Offset (px): Button appears after scrolling this many pixels

Scroll Animation:

Preview Instructions

Static Preview: Shows the button style and position.

Live Preview: Test the scroll functionality in the live preview tab.

Saved Configurations

No saved configurations yet

Button Preview (static preview)

Back to Top Button Preview

Configure your settings to see the button style and position.

Generated Code

Live Preview

Generate code to see a live preview of your back to top button.

Share Buttons Settings

Button Layout:

Button Size:

Services to Include:

Facebook

X (Twitter)

Email

Opens AddToAny service selector in new tab

Share Text:

Show Share Counts:

Position:

Preview Instructions

Static Preview: Shows the button style and layout.

Live Preview: After generating code, click the "Live Preview" tab to test the share functionality.

Saved Configurations

No saved configurations yet

Buttons Preview (static preview)

Share Buttons Preview

Configure your settings to see the share buttons style and layout.

Generated Code

Live Preview

Generate code to see a live preview of your share buttons.

Emoji Rating Settings

Rating Type:

Custom Emojis (comma separated):

Emoji Size:

36px

Hover Animation:

Question Text:

Show Results After Voting:

Preview Instructions

Static Preview: Shows the emoji style and layout.

Live Preview: After generating code, click the "Live Preview" tab to test the rating functionality.

Saved Configurations

No saved configurations yet

Emoji Preview (static preview)

Emoji Rating Preview

Configure your settings to see the emoji rating style and layout.

Generated Code

Live Preview

Generate code to see a live preview of your emoji rating widget.

Progress Bar Settings

Progress Bar Style:

Progress Color:

Background Color:

Size:

20px

Initial Value (%):

65%

Animation:

Show Percentage:

Label Text:

Preview Instructions

Static Preview: Shows the progress bar style and appearance.

Live Preview: After generating code, click the "Live Preview" tab to test the progress animation.

Saved Configurations

No saved configurations yet

Progress Bar Preview (static preview)

Progress Bar Preview

Configure your settings to see the progress bar style and appearance.

Generated Code

Live Preview

Generate code to see a live preview of your progress bar.

Cookie Banner Settings

Banner Position:

Cookie Message:

Accept Button Text:

Decline Button Text:

Learn More Text:

Learn More Link:

Background Color:

Text Color:

Button Color:

Cookie Expiry (days):

Preview Instructions

Static Preview: Shows the banner style and layout.

Live Preview: After generating code, click the "Live Preview" tab to test the cookie banner functionality.

Saved Configurations

No saved configurations yet

Cookie Banner Preview (static preview)

Cookie Banner Preview

Configure your settings to see the cookie banner style and layout.

Generated Code

Live Preview

Generate code to see a live preview of your cookie banner.

Reading Progress Bar Settings

Position:

Progress Color:

Height:

4px

Style:

Animation:

Show Percentage:

Preview Instructions

Static Preview: Shows the progress bar style and appearance.

Live Preview: After generating code, click the "Live Preview" tab to test the progress functionality.

Saved Configurations

No saved configurations yet

Reading Progress Preview (static preview)

Reading Progress Preview

Configure your settings to see the reading progress bar style and appearance.

Generated Code

Live Preview

Generate code to see a live preview of your reading progress bar.