Custom HTML & CSS

Full control over widget appearance.

When to Use

• Templates don't match your brand
• Need specific layout changes
• Want to add icons or images

Access

1. Go to Settings → Widget
2. Scroll to "Advanced"
3. Find HTML and CSS editors

HTML Variables

• {{title}} — Fee title
• {{description}} — Fee description
• {{price}} — Formatted amount
• {{checkbox}} — The checkbox input

Example HTML

<div class="tackon-widget">
  <div class="tackon-header">
    <span class="tackon-icon">🎁</span>
    <span class="tackon-title">{{title}}</span>
  </div>
  <p class="tackon-desc">{{description}}</p>
  <label class="tackon-label">
    {{checkbox}}
    <span>Add for {{price}}</span>
  </label>
</div>

Example CSS

.tackon-widget {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}

.tackon-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tackon-title {
  font-weight: 600;
}

.tackon-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 12px;
}

.tackon-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

Tips

1. Test on desktop, tablet, mobile
2. Use your brand colors
3. Keep sufficient contrast
4. Always include {{checkbox}}