Widget Installation

To embed a Trycolors widget on your website, you'll use an iframe. The easiest way to get started is to copy the embed code provided in your Trycolors dashboard and paste it directly into your HTML. The code will look something like this:

<iframe 
  src='https://trycolors.com/widget?token=4fbd6470-2f62-477e-b47e-e623334d1093' 
  width='600' 
  height='500' 
  frameborder='0' 
  allowfullscreen 
/>

Do not use the code from this example. Always use the unique code with your specific widget token provided in the configuration panel of your Trycolors dashboard.

Customizing Widget Size

Fixed Width and Height

By default, the widget comes with a fixed width of 600 pixels and a height of 500 pixels. You can adjust these values to fit your needs:

<iframe 
  src='https://trycolors.com/widget?token=YOUR_WIDGET_TOKEN' 
  width='800' 
  height='600' 
  frameborder='0' 
  allowfullscreen 
/>

Responsive Width

To make the widget responsive and take up the full width of its container, you can set the width to 100%:

<iframe 
  src='https://trycolors.com/widget?token=YOUR_WIDGET_TOKEN' 
  width='100%' 
  height='500' 
  frameborder='0' 
  allowfullscreen 
/>

Maintaining Aspect Ratio

To maintain a specific aspect ratio (e.g., 16:9) while allowing the widget to be responsive, you can use a combination of CSS and HTML. Here's an example:

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
  <iframe 
    src='https://trycolors.com/widget?token=YOUR_WIDGET_TOKEN' 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder='0' 
    allowfullscreen 
  />
</div>

In this example, the padding-bottom value of 56.25% creates a 16:9 aspect ratio. You can adjust this value to achieve different aspect ratios:

4:3 aspect ratio: padding-bottom: 75%
1:1 aspect ratio (square): padding-bottom: 100%

Advanced Customization

Currently, the widget URL does not support additional parameters beyond the token. However, you can use CSS to further customize the appearance of the iframe within your website.

For example, to add a border and box shadow:

<iframe 
  src='https://trycolors.com/widget?token=YOUR_WIDGET_TOKEN' 
  width='100%' 
  height='500' 
  frameborder='0' 
  allowfullscreen 
  style="border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);"
/>

Browser Compatibility

Trycolors widgets are designed to work in modern web browsers. However, for the best experience, we recommend using the latest versions of Chrome, Firefox, Safari, or Edge.

Troubleshooting

If your widget isn't displaying correctly, check the following:

Ensure the widget token is correct and hasn't expired.
Check that your website's Content Security Policy (CSP) allows embedding iframes from trycolors.com.
Verify that there are no JavaScript errors on your page that might interfere with the iframe.

If you continue to experience issues, please contact our support team for assistance.

Next Steps

Learn about advanced widget usage for more complex integrations
Check out our API documentation if you need more advanced color mixing capabilities

For any questions or support regarding widget installation, please contact our support team (opens in a new tab).

Guess Mix Game Advanced