How to Integrate Drefly Into Your Company

This is the follow up to Why Use Drefly's Record Tool for Your Company. That post covers what the widget does and why. This one is the walkthrough: every screen, every field, and every setting you'll actually touch to get a customer facing recording widget live on your site, connected to storage you control. Assume zero prior context. By the end you'll have a working embed and a first test recording sitting in your own bucket.

Before you start

You'll need two things ready before you open the dashboard: a domain (or a few) where the widget will run, and access to an S3 compatible storage bucket, either one you already have or a new one you create for this. Amazon S3, Cloudflare R2, Backblaze B2, DigitalOcean Spaces, Wasabi, Google Cloud Storage, MinIO, and any other S3 compatible provider all work. If you don't have a bucket yet, create an empty one now in whichever provider you use, you'll point Drefly at it in a few minutes.

Unlock the developer dashboard

Go to developer.drefly.pro. There's no separate signup form for this. If you already have a Drefly account secured with a passkey, the same passkey unlocks the developer dashboard, click Unlock with passkey. If this is your first time on this device, click Set up a new passkey instead, your browser or device will walk you through creating one (fingerprint, face, or device PIN, whichever your device offers). There's no password to invent, and nothing to remember beyond the passkey your device already manages for you.

Add a company

Once you're in, click Add a company. Each company is its own widget: its own domain, its own branding, and its own storage bucket, so recordings from one company never end up in another company's storage. Fill in:

• Company name - shown in the widget's UI text (things like "Recording for Acme Inc") and used to build the storage folder structure for that company's recordings.
• Allowed domains - the domain, or domains, the widget is allowed to run on. Add one at a time and press Add or Enter after each. A bare domain like app.company-a.com only matches that exact host, a wildcard like *.company-a.com matches every subdomain. You can add up to 15 domains on a single widget, useful if you run staging and production on different subdomains.
• Brand color - defaults to #4f46e5. Set it to your own color and it runs through every button and accent in the widget. Leave it and the widget tries to detect a color from your site's own theme-color meta tag or primary buttons instead of using the default.
• Widget records - choose what gets captured: screen, camera, and mic; screen and mic only; or screen only.
• Logo URL - optional, a direct link to an image file. It appears in the widget's header wherever your brand color does.
• Place the icon inside an existing element - optional. Leave this blank and the widget shows as a floating button in the bottom right corner, and it automatically shifts position if it detects an existing chat widget already parked there (Intercom, Crisp, Drift, Tawk, Zendesk, HubSpot, and Freshchat are all recognized automatically). If you'd rather the recorder show up as a small icon inside something you already have, like a support widget's header bar, give a CSS selector here instead, for example #chat-header. If that container sits inside an iframe, add the iframe's own selector in the field below it, for example iframe#chat-widget, this only works when the iframe is on your own domain since third party iframes are blocked by the browser, and the widget falls back to the floating button automatically when it can't reach in.

Click Save company. Your new widget now exists, though it isn't connected to storage yet, that's the next step.

Embed the snippet

Find the company you just added and click Get snippet. You'll get a single line to paste onto your site, right before the closing </body> tag works well:

<script src="https://drefly.pro/widget/embed.js" data-key="YOUR_PUBLIC_KEY" defer></script>

The data-key value is specific to this company's widget, it's how the script knows which configuration, branding, and storage bucket to use, and it's checked against the allowed domains you set earlier. Paste the snippet on every page you want the recorder available on, or drop it in a shared layout or template so it loads everywhere at once. There's no build step, no package to install, and nothing else to configure on the code side, the script reads its own configuration from your dashboard settings at load time.

Connect your storage bucket

Back in the dashboard, click Connect their storage on the company you added. Recordings upload straight into this bucket, Drefly's own servers never keep a copy. You can paste a bucket URL into the quick fill field at the top and it'll try to detect the bucket name, region, and endpoint for you, or fill the fields in yourself:

• Bucket - the bucket name exactly as it appears in your provider's console.
• Access key ID and Secret access key - a key pair with permission to write to that bucket. Where to get these depends on your provider:
  • Amazon S3: IAM, then Users, your user's Security credentials tab, Create access key. The secret is only shown once, right after creation, copy it before closing that screen.
  • Cloudflare R2: R2 in your Cloudflare dashboard, Manage R2 API tokens, Create API token. The account ID already shown in your R2 settings is not the access key, use the token's own key and secret.
  • Backblaze B2: App Keys, Add a New Application Key. The keyID is your access key, the applicationKey shown right after is your secret.
  • DigitalOcean Spaces: API in your control panel, Spaces Keys, Generate New Key.
  • Wasabi: Access Keys in the Wasabi console, Create New Access Key.
  • Google Cloud Storage: Cloud Storage settings, Interoperability tab, Create a key.
  • MinIO: Access Keys in your MinIO console, Create access key.
  • Any other S3 compatible provider: look for an API or access keys section in that provider's dashboard.
• Object prefix - defaults to drefly-widget. Recordings are organized under this prefix automatically by company and date, change it if you want this company's files to land in a specific existing folder in the bucket.
• Region and Endpoint - hidden by default under "Not Amazon S3? Set region or endpoint". Leave both blank for Amazon S3. For everything else, set the endpoint to your provider's S3 endpoint:
  • Cloudflare R2: https://<account-id>.r2.cloudflarestorage.com
  • Backblaze B2: https://s3.<region>.backblazeb2.com
  • DigitalOcean Spaces: https://<region>.digitaloceanspaces.com
  • Wasabi: https://s3.<region>.wasabisys.com
  • Google Cloud Storage: https://storage.googleapis.com
  • MinIO or a self hosted provider: whatever endpoint URL your instance runs on
  Drefly reads the endpoint you enter and detects the provider automatically from it, this decides things like whether path style addressing is used, you don't need to pick a provider from a list yourself.

Click Verify and save. Drefly makes a real request to your bucket with the credentials you entered before saving anything. If the bucket, region, endpoint, or keys don't line up, you'll get an error telling you to double check them rather than a config that silently fails later. Once it succeeds, your widget is fully live, recordings sent through it from now on land directly in this bucket.

Set up CORS on your bucket

Because recordings upload directly from your customer's browser into your bucket rather than passing through a Drefly server, your bucket needs a CORS policy that allows requests from your own site's origin. Without it, the upload (and downloading or sharing a recording later from your dashboard) will fail with a browser level CORS error even though the credentials are correct. Every provider listed above has its own CORS settings screen, usually called something like "CORS configuration" or "CORS policy" in that provider's bucket settings. At minimum, allow GET, PUT, and HEAD methods from your site's origin (for example https://app.company-a.com), and allow the Content-Type header, since the browser sends that with each upload. If you widen it while testing, remember to scope the allowed origins back down to just the domains you actually use once things are working.

Two more origins need to be on that same allow list, and they're easy to miss because they're not your own domain: https://record.drefly.pro and https://developer.drefly.pro. Add both alongside your own site's origin, not instead of it. developer.drefly.pro is where your dashboard runs, and converting, watching, or sharing a recording from that dashboard is a browser request straight to your bucket, so without it on the allow list those actions fail. If your widget uses the new page recording mode, that flow opens on record.drefly.pro, and that page uploads the recording directly to your bucket too. Leave it off the allow list and the recording won't sync, it never makes it into your bucket at all.

If this step gets missed, Drefly's dashboard will tell you plainly what's wrong rather than leaving you to guess: recording playback still works either way since that doesn't need CORS, but downloading or sharing a recording will show a message explaining that the bucket's CORS settings are blocking browser access from your dashboard's own origin, with the exact origin to add spelled out for you.

Rotating and deleting keys later

Nothing here is a one time setup you're stuck with. You're free to change any of it whenever you need to:

• Rotate the widget's public key - open the snippet overlay for that company and click Rotate key. This immediately issues a new key and invalidates the old one, so the snippet already live on your site stops working the moment you rotate, you'll need to update the data-key value on your site with the new key right after. Use this if a key ever leaks or you're rebuilding the embed from scratch.
• Update or rotate storage credentials - open Connect their storage again for that company and enter new values. The secret key is masked by default, click the eye icon to reveal it if you need to check what's currently saved. Saving new credentials re-verifies access to the bucket the same way the first setup did, and immediately replaces the old key pair, nothing keeps using the previous credentials afterward.
• Remove a company entirely - delete it from the dashboard and the widget's key stops working immediately, so the snippet on that site goes dark right away. Recordings already saved to the bucket are untouched, deleting the widget in Drefly doesn't reach into your storage and remove anything, that's entirely up to you and your own retention rules.

Placement, recording mode, and other config

A couple of settings exist on every widget but don't have a toggle in the dashboard yet, they're still worth knowing about since they're active right now on every widget you create:

• Recording mode - by default, a visitor clicking record sees a quick choice between "This tab" and "New page" (covered in detail in Why Use Drefly's Record Tool for Your Company). If you'd rather skip that choice and always use the new page flow, that's a config value called recording_mode, set to redirect_tracking instead of the default in_page.
• Font family - the widget inherits a sensible default font stack. A font_family value is supported if you want the widget's text to match a specific font your site already loads.

For the broader picture of what the widget actually does once it's embedded, security, data ownership, and both recording flows, read Why Use Drefly's Record Tool for Your Company. To try the recording experience your customers will see, open the Record tool yourself first.

We'd love your feedback

If a step in this guide didn't match what you saw, a storage provider you use isn't listed, or something in setup tripped you up, we want to know. Reach out any time through the Feedback page or by emailing support@drefly.pro.