Universal Headless Widget Maker

Build and customize accessible, interactive web components without touching a single line of code.

🛠️ Configuration

1. Select Widget Type

2. Brand Colors (Auto-adjusts text for accessibility)

Primary

Container BG

Page BG

3. Content Data

👀 Live Preview

Generated Headless Snippet (Save as .html file)

How to Host & Embed Your Widget

Because these widgets use interactive JavaScript, they cannot be pasted directly into standard text editors (like a TargetConnect description box) which strip out code for security. You must host the generated code as an HTML file first.

Option 1: The IT Department Route (Recommended)

If you are building this for an official university or corporate platform, your IT team will have a server.

1. Click "Copy Snippet" from this builder.
2. Open a plain text editor (like Notepad on Windows or TextEdit on Mac), paste the code, and save the file as my-widget.html.
3. Send this file to your IT or Web team and ask them to host it on the university/company server.
4. They will give you back a URL (e.g., https://your-uni.edu/assets/my-widget.html).
5. You can now embed that URL into TargetConnect (or SharePoint) using an iframe.

Option 2: The DIY GitHub Route (Free)

If you don't have IT support, you can host it yourself for free using GitHub Pages.

1. Create a free account on GitHub.
2. Create a new "Repository" (think of it as a folder) and name it something like careers-tools.
3. In your new repository, click Add file > Create new file.
4. Name the file flashcards.html and paste the code from this builder into the text box. Commit (save) the changes.
5. Go to the repository Settings > Pages.
6. Under "Source", select the main branch and click Save. Within a few minutes, GitHub will publish your file.
7. Your widget will be live at a URL looking like: https://your-username.github.io/careers-tools/flashcards.html