Embed Widget Documentation
Introduction
The PicPuzzle embed widget allows you to add interactive puzzles to your website, blog, or application. Users can play the puzzle directly within the embedded iframe without leaving your site.
Key Features
- Fully interactive puzzle gameplay
- Customizable colors to match your site's theme
- Leaderboard integration
- Responsive design for all screen sizes
- "Powered by PicPuzzle" branding with link back
Basic Usage
To embed a PicPuzzle on your website, use the following iframe code. Replace YOUR_SHARE_CODE with your puzzle's share code.
Basic Embed Code:
<iframe src="https://picpuzzle.xyz/embed/YOUR_SHARE_CODE" width="400" height="500" frameborder="0" allow="clipboard-write" style="border: none; border-radius: 8px;" ></iframe>
Finding Your Share Code
Your share code is the unique identifier at the end of your puzzle URL. For example, if your puzzle URL ishttps://picpuzzle.xyz/puzzle/ABC123, your share code is ABC123.
Customization Options
Customize the widget's appearance using query string parameters. All color values should be hex codes without the # symbol.
| Parameter | Default | Description |
|---|---|---|
| bgcolor | ffffff | Background color of the widget |
| txtcolor | 171717 | Text color |
| btncolor | 2563eb | Button background color |
| btntxtcolor | ffffff | Button text color |
| showsecret | 0 | Set to 1 to show secret message in embed (if puzzle has one). Default shows link to main site. |
Customized Example:
<iframe src="https://picpuzzle.xyz/embed/ABC123?bgcolor=1a1a2e&txtcolor=eaeaea&btncolor=e94560&btntxtcolor=ffffff" width="400" height="500" frameborder="0" allow="clipboard-write" style="border: none; border-radius: 8px;" ></iframe>
Sizing Guidelines
The embed widget is responsive and adapts to different sizes. Here are our recommendations:
| Size | Dimensions | Best For |
|---|---|---|
| Recommended | 400×500px | Sidebars, blog posts, general use |
| Large | 600×700px | Featured content, landing pages |
| Compact | 300×400px | Narrow sidebars, mobile-first layouts |
| Minimum | 250×300px | Tight spaces (some features simplified) |
Responsive Tip
For responsive layouts, you can use percentage widths or CSS to make the iframe adapt to its container:
<div style="max-width: 500px; width: 100%;">
<iframe
src="https://picpuzzle.xyz/embed/ABC123"
width="100%"
height="500"
frameborder="0"
style="border: none; border-radius: 8px;"
></iframe>
</div>Examples
Dark Theme:
<iframe src="https://picpuzzle.xyz/embed/ABC123?bgcolor=1f2937&txtcolor=f9fafb&btncolor=3b82f6&btntxtcolor=ffffff" width="400" height="500" frameborder="0" style="border: none; border-radius: 8px;" ></iframe>
Green Accent:
<iframe src="https://picpuzzle.xyz/embed/ABC123?bgcolor=f0fdf4&txtcolor=166534&btncolor=22c55e&btntxtcolor=ffffff" width="400" height="500" frameborder="0" style="border: none; border-radius: 8px;" ></iframe>
With Secret Message Visible:
<iframe src="https://picpuzzle.xyz/embed/ABC123?showsecret=1" width="400" height="500" frameborder="0" style="border: none; border-radius: 8px;" ></iframe>
Limitations & Notes
Small Embeds: At widths below 300px, some features are simplified (leaderboard hidden, text shortened).
Secret Messages: By default, secret messages are not shown in the embed. Users are directed to the main site to view them. Use showsecret=1 to override.
Leaderboard: The embed shows the player's rank and top 3 scores after completing the puzzle.
Branding: A small "Powered by PicPuzzle" link appears at the bottom of the widget.
Analytics: Puzzle plays from embeds are tracked separately and can be filtered in your analytics dashboard.
Need Help?
If you have questions about embedding PicPuzzle widgets, check out our API Documentation or contact us at support@picpuzzle.xyz.