Skip to main content

JavaScript Quote Widget

Embed the Quote of the Day on your website with a single line of code. Lightweight, fast, and automatically updates daily.

Get the Code Customize Styling

Free • No account required • Under 1KB • Updated daily

Live Preview

⚡

Lightweight

Under 1KB, loads async, won't slow your site

🎨

Customizable

Style with your own CSS to match your design

🔄

Auto-Updates

Fresh quote every day, no maintenance needed

✅

No API Key

Just copy, paste, and you're done

Embed Code

Copy and paste this code anywhere in your HTML where you want the quote to appear:

<script src="https://fixquotes.com/feeds/qotd.js"></script>

The script automatically writes the quote HTML at the location where it's included. Place it inside a <div> or other container element.

HTML Output

The widget generates clean HTML that you can style with CSS:

<div class="fixquotes-qotd">
  <div class="fixquotes-qotd-title">Quote of the Day</div>
  <div class="fixquotes-qotd-quote">"The quote text appears here."</div>
  <div class="fixquotes-qotd-author">
    — <a href="...">Author Name</a>
  </div>
</div>

Custom Styling

Add CSS to customize the widget's appearance. Here are some examples:

Basic Styling

.fixquotes-qotd {
  font-family: Georgia, serif;
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem;
  border-left: 4px solid #007bff;
  background: #f8f9fa;
}

.fixquotes-qotd-title {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.fixquotes-qotd-quote {
  font-size: 1.25rem;
  font-style: italic;
  margin-bottom: 1rem;
}

.fixquotes-qotd-author a {
  font-weight: bold;
  color: #333;
}

Dark Mode

.fixquotes-qotd {
  background: #1a1a2e;
  color: #eee;
  border-left-color: #ffd700;
}

.fixquotes-qotd-title {
  color: #888;
}

.fixquotes-qotd-author a {
  color: #ffd700;
}

Centered Card

.fixquotes-qotd {
  text-align: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 2rem;
  border: none;
}

.fixquotes-qotd blockquote::before {
  content: '"';
  font-size: 4rem;
  color: #ddd;
  line-height: 0;
}

Placement Tips

Sidebar

Add to your blog's sidebar for daily inspiration alongside your content.

Footer

Place in your site footer as a thoughtful sign-off for visitors.

Homepage

Feature prominently on your homepage to greet visitors with wisdom.

Email Signature

Some email clients support HTML signatures with embedded scripts.

Frequently Asked Questions

Yes! The JavaScript widget is completely free for personal and non-commercial use. No registration or API key required. For commercial use, please contact us to discuss licensing options.

The Quote of the Day updates once daily at midnight (Eastern Time). All websites using the widget will show the same quote, ensuring a consistent experience.

No. The script is tiny (under 1KB) and the quote content is served from a fast CDN with proper caching headers. The script uses document.write() which is synchronous, so place it where you want the content to appear, ideally lower in the page or in a sidebar.

Currently the widget only supports the Quote of the Day. For random quotes, consider using our RSS feeds with a server-side script, or contact us about custom solutions.

If the script fails to load (network issues, ad blocker, etc.), nothing will appear in that location. Your page will continue to work normally. Consider wrapping the script in a container with fallback content if this is a concern.

Looking for More Options?

WordPress Plugin

Full-featured widget with settings panel

RSS Feeds

For server-side integration & automation

All Options

Email, bots, extension & more