codocと導入先サイト間で機能連携ができる、codoc pro 拡張機能ついて説明します。
これは何？
codoc pro が提供する機能であるため利用の際は pro の契約をおこなう必要があります。codocを利用しているサービス・クリエイターと、コンテンツ購入者にとって最適化された管理画面やコンテンツ管理方法を提供する機能です。 クリエイターがこれを有効にした場合、購入者の管理画面において購入・購読画面において当該クリエイターの商品のみ表示されるようになったり、管理画面や購入メールに利用されるロゴをクリエイターのものに変更するといったことが可能です。 また、クリエイターのサイト内でcodocのログイン状態を表示するウィジェットやcodoc管理画面に存在する購入・購読画面の機能もウィジェット化され利用することができます。
どのようなケースで使うか？
- 購入者が利用するcodoc管理画面のデザインを替えたい
- 管理画面や決済画面のロゴや、色味をカスタマイズできます
- サイト内でcodocのログインボタンを設置したい
- codocにログインするためのボタンを設置できます
- サイト内で購入履歴閲覧やサブスクの管理を行いたい
- codoc管理画面内にある機能をサイト内で提供可能です
どうやって使うか？
アカウント設定画面よりこの機能を有効にできます。有効にした後はプロフィール設定画面に移動し許可URLを必ず指定してください。許可URLは設置先のURLとなります。個別のページではなく、TOPページにあたるものをご指定ください。この設定がおこなわれないと機能動作がしないためご注意願います。
以上でベースとなる設定は完了です。
購入者向け管理画面のデザイン
デザイン変更はプロフィール画面より実施してください。ロゴについては推奨となるサイズにてアップロードをおこなうだけです。管理画面CSSにはテーマ色を選べるようになっており、カスタム選択時においては各所の色指定をカラーピッカーにて指定可能です。
拡張機能ウィジェットの設置
サイト内にログインボタンや、購入履歴の表示機能を導入するには拡張機能有効時に利用できる専用ウィジェットの貼付けをおこなうだけで完了します。ウィジェットは管理画面内のウィジェット→拡張機能から取得できます。
ただし、これらのウィジェットはcodocのスクリプトタグを改変しないと利用できない仕様となっています。
- cms.js のスクリプトファイル名を cms-connect.js に変更
- data-connect-code=”拡張機能コード”を追加（拡張機能コードはアカウント画面で取得できます。）
となります。
<script src=”https://codoc.jp/js/cms.js”>
変更後
<script src=”https://codoc.jp/js/cms-connect.js” data-connect-code=”拡張機能コード”>
変更後
これらは手動で変更することでも問題ありませんが、codoc管理画面内のウィジェット→拡張機能画面で表示されるJavascriptタグをコピーし、従来あったものと置き換えることでも可能です。
WordPressプラグインをご利用の場合はスクリプトタグの変更は行わず、WP管理画面の設定→codocより、クリエイター情報の更新をするをクリックし、変更を保存してください。以下のように、「拡張機能の連携完了」と表示されれば完了です。
上記の設定が完了したあとは拡張機能のウィジェットをサイト内の適切な位置に貼り付けます。
ログインウィジェット
購入ウィジェット
サブスクリプションウィジェット
codoc→サイトへの遷移時に変更点があります
初回（ログイン・購入時含む）と、２回目からの遷移時において以下のような確認が入るようになります。
途中から有効にできるか？
運用中であっても、有効にできますし、無効にもすることも可能です。ただし、以前より購入しているユーザーについては一律で有効になることはありません。再度コンテンツ購入や、アクセスがあった段階で初回の連携確認が済んだ段階で機能が有効になります。
まとめ
codoc pro 拡張機能について説明をおこないました。上述のとおり、サイトのデザインをcodoc側へある程度反映することや、サイト内にて購入履歴を表示できるようなります。ユーザーは通常の販売方法と比較し、より違和感なくコンテンツを購入・管理できることができると思います。