Widgets

Have Ruley manage your AI widget and avoid timely development and maintenance costs.

Introduction

Ruley widgets are pre-built, embeddable components that you can add to your website or application with just a few lines of code.

Our widgets are designed to be responsive, customizable, and easy to integrate. They handle all the communication with the Ruley API, so you don't have to worry about managing state or handling API responses.

Integration

How to embed Ruley widgets into your site

Before you begin

Create a publishable widget key and whitelist your domain in the Embed builder. This links your domain to your subscription and ensures the widget functions correctly on your site.

You can embed the chat widget with an iframe or with the Ruley loader script for inline or floating bubble modes.

<script
  src="https://ruley.ai/embed/v1.js"
  data-ruley-key="YOUR_WIDGET_KEY"
  data-sport="kickball"
  data-mode="bubble"
  data-theme="light"
  data-primary="#1e8e3e"
  data-title="Ask the Ref"
  defer
></script>

Set data-mode to inline or bubble. For WordPress, paste the snippet into a Custom HTML block.

Customization

Tailor the widget to your brand

Chat widget appearance is configured via URL parameters on the iframe src, or via data-* attributes on the loader script.

k: publishable widget key (rwk_live_...)
sport: sport id, e.g. kickball
theme: light, dark, or system
primary: hex brand color, e.g. #1e8e3e
accent: secondary hex for highlights
logoUrl: HTTPS or same-origin logo image
backgroundUrl: HTTPS or same-origin chrome background image
surface: default or brand-dark
radius: sharp, rounded, or pill
font: system, geist, montserrat, or poppins
title: title shown in the widget header
subtitle: secondary header line under the title
greeting: first assistant message
Dashboard → Embed includes Brand kit presets (e.g. Turf Wars)

Quiz Widget

Embed an interactive, AI-graded rules quiz

Set data-widget="quiz" on the loader script (or point an iframe at /embed/quiz) to embed a rules quiz instead of the chat widget. The quiz shares the same widget key, sport, theme, primary color, and title options.

<script
  src="https://ruley.ai/embed/v1.js"
  data-ruley-key="YOUR_WIDGET_KEY"
  data-widget="quiz"
  data-sport="kickball"
  data-mode="inline"
  data-theme="light"
  data-primary="#1e8e3e"
  data-title="Rules Quiz"
  data-height="640"
  defer
></script>

Each sport ships with a built-in default question set. To use your own questions, open the Embed builder, choose the Quiz widget and a widget key, then author and save questions per sport in the Quiz Questions panel. Saved questions are stored with your account and served automatically to your embedded quiz.

Live Preview

Is that a Penalty? - Golf Rule Checker

Golf Rule Checker

Ask about any scenario

Welcome to 'Is That a Penalty?' I'm the authority on golf rules. Describe your situation, and I'll tell you if it's a penalty.

My ball moved when I addressed it.I hit the wrong ball in match play.Can I remove loose impediments in a bunker?My ball is plugged in the fairway.