From cac1daac8d515b0216b479918c846cd32b4d8c11 Mon Sep 17 00:00:00 2001
From: Patrick Hughes <patrick.hughes@coinbase.com>
Date: Tue, 13 Jan 2026 16:03:48 -0600
Subject: [PATCH 1/2] add manual append guide to builder code docs

---
 docs/base-chain/quickstart/builder-codes.mdx | 74 +++++++++++++++++++-
 1 file changed, 72 insertions(+), 2 deletions(-)

diff --git a/docs/base-chain/quickstart/builder-codes.mdx b/docs/base-chain/quickstart/builder-codes.mdx
index 39b65a75..40bedef5 100644
--- a/docs/base-chain/quickstart/builder-codes.mdx
+++ b/docs/base-chain/quickstart/builder-codes.mdx
@@ -21,11 +21,81 @@ Once your app is registered on [Base.dev](http://base.dev/), the Base App will a
 
 ## For App Developers
 
-When you register on [base.dev](https://base.dev/), you will receive a **Builder Code**—a random string (e.g., `k3p9da`) that you'll use to generate your attribution suffix. 
+When you register on [base.dev](https://base.dev/), you will receive a **Builder Code**—a random string (e.g., `bc_b7k3p9da` ) that you'll use to generate your attribution suffix. 
 
 You can find your code anytime under **Settings** → **Builder Code**.
 
-<Callout icon="clock" color="#3B82F6" iconType="regular">Manual appending outside of the Base app is coming soon.</Callout>
+<Steps>
+  <Step title="Install the Standard Library for Ethereum">
+
+This will allow you to append the encoded version of your builder code.
+
+    ```bash
+    npm i ox
+    ```
+  </Step>
+
+  <Step title="Copy Your Builder Code">
+    Navigate to **base.dev > Settings > Builder Codes** to find your unique builder code.
+  </Step>
+
+  <Step title="Create the Encoded Data Suffix">
+    Use the `Attribution.toDataSuffix` method from the `ox` library to encode your builder code:
+
+    ```ts
+    import { Attribution } from "ox/erc8021";
+
+    const DATA_SUFFIX = Attribution.toDataSuffix({
+      codes: ["YOUR-BUILDER-CODE"], // obtained from base.dev > Settings > Builder Codes
+    });
+    ```
+  </Step>
+
+  <Step title="Send transaction using the dataSuffix capability">
+    Use Wagmi's `useSendCalls` hook with the `dataSuffix` capability to append attribution data to your transactions.
+
+    ```ts
+    import { useSendCalls } from "wagmi";
+    import { parseEther } from "viem";
+    import { Attribution } from "ox/erc8021";
+
+    const DATA_SUFFIX = Attribution.toDataSuffix({
+      codes: ["YOUR-BUILDER-CODE"],
+    });
+
+    function App() {
+      const { sendCalls } = useSendCalls();
+
+      return (
+        <button
+          onClick={() =>
+            sendCalls({
+              calls: [
+                {
+                  to: "0x70997970c51812dc3a010c7d01b50e0d17dc79c8",
+                  value: parseEther("1"),
+                },
+                {
+                  data: "0xdeadbeef",
+                  to: "0xa5cc3c03994DB5b0d9A5eEdD10CabaB0813678AC",
+                },
+              ],
+              capabilities: {
+                dataSuffix: {
+                  value: DATA_SUFFIX,
+                  optional: true,
+                },
+              },
+            })
+          }
+        >
+          Send calls
+        </button>
+      );
+    }
+    ```
+  </Step>
+</Steps>
 
 ## For Wallet Developers
 

From b98079cbcc21cd620b93d33da72c85e3c1ad16b6 Mon Sep 17 00:00:00 2001
From: Patrick Hughes <patrick.hughes@coinbase.com>
Date: Tue, 13 Jan 2026 16:09:40 -0600
Subject: [PATCH 2/2] add code file titles and tooltip

---
 docs/base-chain/quickstart/builder-codes.mdx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/base-chain/quickstart/builder-codes.mdx b/docs/base-chain/quickstart/builder-codes.mdx
index 40bedef5..d4b4ea5c 100644
--- a/docs/base-chain/quickstart/builder-codes.mdx
+++ b/docs/base-chain/quickstart/builder-codes.mdx
@@ -23,14 +23,16 @@ Once your app is registered on [Base.dev](http://base.dev/), the Base App will a
 
 When you register on [base.dev](https://base.dev/), you will receive a **Builder Code**—a random string (e.g., `bc_b7k3p9da` ) that you'll use to generate your attribution suffix. 
 
-You can find your code anytime under **Settings** → **Builder Code**.
+<Tip>
+  You can find your code anytime under **Settings** → **Builder Code**.
+</Tip>
 
 <Steps>
   <Step title="Install the Standard Library for Ethereum">
 
 This will allow you to append the encoded version of your builder code.
 
-    ```bash
+    ```bash Terminal
     npm i ox
     ```
   </Step>
@@ -42,7 +44,7 @@ This will allow you to append the encoded version of your builder code.
   <Step title="Create the Encoded Data Suffix">
     Use the `Attribution.toDataSuffix` method from the `ox` library to encode your builder code:
 
-    ```ts
+    ```ts App.tsx
     import { Attribution } from "ox/erc8021";
 
     const DATA_SUFFIX = Attribution.toDataSuffix({
@@ -54,7 +56,7 @@ This will allow you to append the encoded version of your builder code.
   <Step title="Send transaction using the dataSuffix capability">
     Use Wagmi's `useSendCalls` hook with the `dataSuffix` capability to append attribution data to your transactions.
 
-    ```ts
+    ```ts App.tsx
     import { useSendCalls } from "wagmi";
     import { parseEther } from "viem";
     import { Attribution } from "ox/erc8021";