@getmagicink/client-react

MagicInk

What is MagicInk?

MagicInk is an AI-powered, data-driven content generation and optimization platform. Your website boils down to the content that you show your users and the actions you want them to take. MagicInk generates and optimizes your content for the actions your users are taking. Test thousands of automatically generated instances of your copy, and watch as MagicInk selects and iterates on the language that resonates most with your users.

What is this package?

In MagicInk, you create "Inks" for your website. The MagicInk React Client will initialize MagicInk automatically, and includes a clean interface for accessing inks in your React app.

Installation

Package Installation

With npm

npm install --save @getmagicink/client-react

or, with Yarn

yarn add @getmagicink/client-react

MagicInk Setup

1. Create a MagicInk account if you don't already have one. Follow the quick start. Don't worry about pasting any script tags onto your site, this will be taken care of by the MagicInk provider. Take note of your client token (the value shown in initMagic).
2. Create an ink (if you don't already have one). Take note of your ink ID (the value shown in magic).

Usage

First, wrap your app in a MagicProvider. You should only have one of these.

import { MagicProvider } from "@getmagicink/client-react";

// ...

return (
    <MagicProvider clientToken={YOUR_CLIENT_TOKEN}>
        {/* The rest of your app... */}
    </MagicProvider>
);

Then, within the provider, use the Magic component to show your inks. For example:

import { Magic } from "@getmagicink/client-react";

// ...

return (
    <div>
        <h1>
            <Magic generatorId={HEADING_INK_ID} fallback="My Webpage" />
        </h1>
        <div>
            <Magic generatorId={CONTENT_INK_ID} loading={
                <div>Loading...</div>
            } />
        </div>
    </div>
);