Live Record Setup Mailchimp Integration Block for React

No. Finish setup only moves the block to its Connected in this demo state, and the status line says that nothing was sent to Mailchimp. The request in the window is what your server would send for each signup, so wire Finish setup to your own OAuth or key step, and send the request from your signup handler. The sample address is ines.rowe@example.com, never a real one.

Yes, in shape. It is a POST to the audience's members path, with email_address, status, merge_fields and tags, which are fields of Mailchimp's Marketing API for adding a member. The path still says lists, because the API kept that name when Mailchimp began calling them audiences, and the audience id in it is a made-up example id. Edit recordLines at the top of the file to add or drop fields.

With double opt-in on, the request carries "status": "pending": Mailchimp emails a confirmation link and the person becomes subscribed when they click it. With it off, the status is subscribed and they count at once, which is only right when your form already records their consent. The line under the switch and the request both follow it.

The tags input takes a tag when you press Enter or comma, or when you leave the field, skips duplicates whatever their case, and stops at five in this demo. Each one appears as a string in the request's tags list. The remove button on a tag, or Backspace in an empty field, takes it out.

The Steps list shows a number and a title for each step; the titles hide on a phone and stay readable by screen readers. A step you haven't reached can't be opened. When you press Continue or Back, the new step's heading takes focus and a polite line says the step you are on. The first step's Continue waits until an audience is chosen and says so in words.

The block names Mailchimp in text and ships no logo, colour or wordmark. Its tile is a neutral lettermark, Mc in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it under the owner's brand guidelines, and never redraw it.

On a phone the steps come first and the window falls below them, with a rule between. In a right-to-left layout the columns flip, while the request keeps its left-to-right direction in a scrollable, focusable region. The entrance is a CSS transition that is dropped under reduced motion.