Partner kit (stream graphics)

The partner kit has three graphics, picked with the keys under the monitors:

• Badge: a slim, slightly see-through plate with the Zoovdev logo, "Official partner", and "Use code" over the code in an indigo chip. Without a code it is just the logo and "Official partner". About 380 by 130 pixels at 1080p for a six-letter code; it grows with the code.
• Code card: a card built around the code: logo and "Partner" on top, "Use code", the code large in an indigo slab, then "zoov.dev" and "FiveM · Roblox". It needs a code; until one is typed it shows a dashed "YOURCODE" slot and Copy link and Download PNG stay off with "Add a code".
• Corner: a small pill with the logo, the wordmark and a "Partner" tag, for a corner of the screen. It never shows a code ("Not on Corner" under the Code field).

Each comes in a Dark or Light look. Every graphic carries a transparent margin round it for its shadow, so the source or PNG is a little larger than the plate.

The Code field takes whatever code Zoovdev gave the partner: letters, numbers, spaces and . _ - /, up to 24 characters, shown exactly as typed (other characters are dropped as you type). The page does not check the code against anything. A Stripe promotion code made for the partner works because the workspace checkout accepts promotion codes; see the billing doc. While a site-wide sale is applied at checkout, Stripe shows no promotion code field, so a partner code cannot be stacked on a sale. The graphic says "Use code" whatever is typed, so a link in that field also reads "Use code".

A link to the page can carry the settings, so staff can send a partner their kit ready made: /partners?code=ZOOV10&g=card opens the Code card with ZOOV10 in it. Accepted: g (badge, card, corner), code, look (dark, light), motion (0 for off), every (5, 10, 15), canvas (1080, 1440, 2160). Otherwise the page remembers the last settings in the browser.

The partner kit is laid out like OBS Studio Mode. Preview (left) shows the graphic alone on the transparency checker, which is exactly what the PNG holds, with its pixel size above it. Program (right) shows the graphic over a stream frame at its true size on a 1920 by 1080 stream. Transition between them plays the graphic out and back in.

On Program the graphic can be dragged anywhere and snaps to a 48 pixel safe margin and the centre lines; arrow keys move it too (Shift for bigger steps). This only helps the streamer judge it against their own layout: the OBS source is placed in OBS. The frame can be Dusk, Day or Night (stock photos of Los Angeles), or the streamer's own screenshot: press the picture button beside them or drop an image on Program, and Yours appears. The screenshot stays in the browser tab and is never uploaded.

With Motion on, the graphic opens as the logo alone in a round tile, the plate grows out of it (across, then down for the Code card) and each line comes into focus from a soft blur, from the logo outwards. Once it has landed, a faint light travels round the plate's edge every 9 seconds. Going away is the same in reverse: the text dissolves and the plate folds back into the logo. Show decides how often it appears in OBS: Always, or every 5 min, 10 min or 15 min, staying up 20 seconds each time and wiping off in between (nothing stays over the game while it is away). With Motion off the graphic is a still, always on, and Show and Transition are off.

The partner kit's Browser source field holds the link; Copy link copies it. In OBS: in Sources press + and choose Browser, paste the link into URL, and set Width and Height to the numbers under the link ("Width 467 · Height 160"). Ticking "Refresh browser when scene becomes active" replays the entrance each time the scene goes live. Streamlabs takes the same link as a Browser Source. The page is see-through apart from the graphic.

Canvas (1080p, 1440p, 4K) is the stream's resolution: it scales both the browser source and the PNG, so the graphic stays sharp on a 1440p or 4K canvas instead of being stretched. Download PNG saves zoovdev-partner-<graphic>-<look>-<canvas>p.png with real transparency; it goes in an Image source in OBS or Streamlabs, or any editor. The PNG is drawn in the browser; nothing is uploaded.

Where do I get a partner code? From Zoovdev staff. The kit only prints the code; it does not create or check codes. Not documented beyond that, ask staff.

The graphic has a white or black box around it in OBS. Use the Browser source link as given; the page is transparent. If a box shows, check the source's Custom CSS in OBS has not been changed to set a background, or use the PNG instead.

The graphic looks blurry. Pick the Canvas that matches the stream's output resolution before copying the link or downloading, then set the new Width and Height in OBS. Scaling a 1080p source up on a 4K canvas blurs it.

It only shows once and never animates again. Tick "Refresh browser when scene becomes active" on the browser source, or set Show to every 5, 10 or 15 minutes.

I changed my code and now it is cut off in OBS. A longer code makes the Badge and Code card wider. Copy the link again and set the new Width and Height from the page.

Can I move the graphic with the link? No. Place the browser source in OBS. Dragging on the page's Program monitor is only a preview.

Is the text translated? The page is. The graphic itself is always English ("Official partner", "Use code").