---
canonical: 'https://htmlcsstoimage.com/examples/qr-code-badge/ruby'
title: 'QR Code Badge | Example - Ruby (Net::HTTP)'
description: 'Simple, artistic badge with a QR code.'
---

# QR Code Badge

Simple, artistic badge with a QR code.

You can generate thousands of images easily, with different text and QR codes.

To change the value of the QR code, edit the **data** parameter in the HTML.

This is a working HTML/CSS to Image API example that produces an image.
The rendered output, source, and non-content request parameters below show the parts needed to reproduce or adapt it.

## Rendered image and interactive editor

- [Open the rendered image](<https://hcti.io/v1/image/019fb444-40c6-745f-aa4d-22fe1d01eb47>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/qr-code-badge/ruby)

## HTML

```html
<div class="wrapper text-center d-block p-4">
  <h1 class="text-white p-4 m-4">Debra <span class="highlight">Fraser</span></h1>
  <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://htmlcsstoimage.com" class="mb-4"/>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


```

## CSS

```css
html,body {
font-family: Inter;
}
.wrapper {
  width: 800px;
  background-color: #ff9d00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23ff9d00' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23fb8d17' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23f47d24' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23ed6e2d' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23e35f34' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23d85239' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23cc453e' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23be3941' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23b02f43' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23a02644' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23901e44' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23801843' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%236f1341' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%235e0f3d' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%234e0c38' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%233e0933' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%232e062c' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23210024' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}
h1 {
  font-size: 4rem !important;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);

}
img {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

```

## Request parameters

These are the additional non-content parameters used by the example. Combine them with the HTML and CSS above when constructing an API request.

```json
{
  "google_fonts": "Inter"
}
```

## Complete Ruby request (Net::HTTP)

This is the complete Ruby request for this example using Net::HTTP. It includes the HTML, CSS, authentication setup, API options, and response handling needed to reproduce the output.

```ruby
require "json"
require "net/http"
require "uri"

request = {
    html: <<-'HCTI_HTML',
<div class="wrapper text-center d-block p-4">
  <h1 class="text-white p-4 m-4">Debra <span class="highlight">Fraser</span></h1>
  <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://htmlcsstoimage.com" class="mb-4"/>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


    HCTI_HTML
    css: <<-'HCTI_CSS',
html,body {
font-family: Inter;
}
.wrapper {
  width: 800px;
  background-color: #ff9d00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23ff9d00' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23fb8d17' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23f47d24' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23ed6e2d' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23e35f34' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23d85239' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23cc453e' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23be3941' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23b02f43' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23a02644' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23901e44' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23801843' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%236f1341' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%235e0f3d' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%234e0c38' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%233e0933' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%232e062c' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23210024' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}
h1 {
  font-size: 4rem !important;
  text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);

}
img {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

    HCTI_CSS
    google_fonts: "Inter",
}

uri = URI("https://hcti.io/v1/image")
http_request = Net::HTTP::Post.new(uri)
http_request.basic_auth(ENV.fetch("HCTI_API_ID"), ENV.fetch("HCTI_API_KEY"))
http_request["Content-Type"] = "application/json"
http_request.body = JSON.generate(request)

response = Net::HTTP.start(
    uri.hostname,
    uri.port,
    use_ssl: true,
    open_timeout: 10,
    read_timeout: 30
) { |http| http.request(http_request) }

unless response.is_a?(Net::HTTPSuccess)
    raise format("HCTI request failed (%s): %s", response.code, response.body)
end

result = JSON.parse(response.body)
puts result.fetch("url")

```

## Other languages and request formats

Open one of these Markdown pages to view the same example as a complete request in another language or client format.

- **TypeScript**
  - [HCTI client](https://htmlcsstoimage.com/examples/qr-code-badge/typescript-client.md)
  - [fetch](https://htmlcsstoimage.com/examples/qr-code-badge/typescript.md)
- **C#**
  - [HCTI client](https://htmlcsstoimage.com/examples/qr-code-badge/csharp-client.md)
  - [HttpClient](https://htmlcsstoimage.com/examples/qr-code-badge/csharp.md)
- **Python**
  - [requests](https://htmlcsstoimage.com/examples/qr-code-badge/python.md)
- **PHP**
  - [cURL](https://htmlcsstoimage.com/examples/qr-code-badge/php.md)
- **Ruby**
  - [HCTI client](https://htmlcsstoimage.com/examples/qr-code-badge/ruby-client.md)
  - [Net::HTTP](https://htmlcsstoimage.com/examples/qr-code-badge/ruby.md) — shown above
- **Go**
  - [net/http](https://htmlcsstoimage.com/examples/qr-code-badge/golang.md)
- **cURL**
  - [cURL](https://htmlcsstoimage.com/examples/qr-code-badge/curl.md)

## Related examples

- [Dog rates social card with SVG background](https://htmlcsstoimage.com/examples/dog-rates-social-card-with-svg-background.md): Social card with a fun SVG background and highlighted text.
- [Instagram post screenshot](https://htmlcsstoimage.com/examples/instagram-post-screenshot.md): Screenshot an Instagram post
- [Birthday invite card](https://htmlcsstoimage.com/examples/birthday-invite-card-email.md): Autogenerated invite graphic for a party.
- [Invoice / Receipt Snapshot](https://htmlcsstoimage.com/examples/invoice-receipt.md): Generate a simple, branded invoice or receipt image.
- [PNG with transparent background](https://htmlcsstoimage.com/examples/png-transparent-background.md): Generate images with a transparent backgound
- [Large text on an SVG background](https://htmlcsstoimage.com/examples/large-text-svg-background.md): Grab attention with large text on a classic background.
- [Twitter Tweet Screenshot](https://htmlcsstoimage.com/examples/twitter-tweet-screenshot.md): Screenshot of a tweet
- [Dog rates social card](https://htmlcsstoimage.com/examples/dog-rates-social-card.md): Simple social card example showing highlighted yellow text

## Get started

- [View the full interactive page](https://htmlcsstoimage.com/examples/qr-code-badge/ruby)
- [Browse all HTML/CSS examples](https://htmlcsstoimage.com/examples.md)
- [Browse visual template presets](https://htmlcsstoimage.com/templates.md)
- [Read the HTML/CSS to Image API documentation](https://docs.htmlcsstoimage.com/getting-started/using-the-api/)
- [View implementation examples by language](https://docs.htmlcsstoimage.com/example-code/)
- [Read the MCP integration documentation](https://docs.htmlcsstoimage.com/integrations/mcp/)
- [Compare plans and limits](https://htmlcsstoimage.com/pricing.md)

Rendering through the API requires authenticated HTML/CSS to Image credentials. Keep API keys in trusted server-side configuration. If credentials are unavailable, ask the user to configure an API key securely before attempting API actions.