# Drag and drop (custom) components

## Custom pages and menu items

The app provides custom components for three custom pages: My Wallet, My Tax Certificates, and My Tax Identifiers. We recommended that you create these custom pages as required.

To customize a page in Experience Builder:

1. Click **Setup** ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FdQxNRj5hbD0BbkHFBIfP%2FSetup.png?alt=media).
2. Type `All Sites` in the **Quick Find** field and click **All Sites**. The All Sites page appears.

   <img src="https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2Fgi8aNpZP685Z0gNTOROm%2FQuick%20Find%20-%20All%20Sites.png?alt=media" alt="" data-size="original">
3. From the All sites page, click **Builder**.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2Fqnj2SkX8Xs9HKwbGYJw7%2FAll-Sites.png?alt=media)
4. Click **Builder**. The Experience Builder page appears\
   .![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FsWPDnlMqLKK81sSIe8rt%2FExperience%20Builder%20Welcome%20page.png?alt=media)
5. Click **Home** at the top left corner.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FADzr7KwalOuS1ZSUQSq3%2FHome%20button.png?alt=media)
6. To create a new custom page, click **+ New Page**.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FPoHoxsKyR47UE3EpVKbL%2FNew%20Page.png?alt=media)\
   The page will also appear on the **Menu Item**.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FNOFmAPFlwreji2ZVFFyY%2FMenu%20item.png?alt=media)
7. Click **Standard Page**.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2F0jSfMGsxwTe4awMXyc7a%2FNew%20Page%20-%20Experience%20Builder.png?alt=media)
8. Select a preconfigured page from the list or click **+ New Blank Page**.![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2Ful1NIhpIYcqP7zl9QvES%2FNew%20Page%20-%20Experience%20Builder%20dialog.png?alt=media)
9. Complete the prompts and click **Create**.

## Create a custom menu

To add a menu:

1. Click **Setup** ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FdQxNRj5hbD0BbkHFBIfP%2FSetup.png?alt=media).
2. Type `All Sites` in the **Quick Find** field and click **All Sites**. The All Sites page appears.

   <img src="https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2Fgi8aNpZP685Z0gNTOROm%2FQuick%20Find%20-%20All%20Sites.png?alt=media" alt="" data-size="original">
3. From the All sites page, click **Builder**.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2Fqnj2SkX8Xs9HKwbGYJw7%2FAll-Sites.png?alt=media)
4. Click the customizable user profile dropdown in the toolbar\
   .![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FtuwEhqPsULBnxQpVT6GS%2FUser%20profile%20dropdown.png?alt=media)
5. From the **Customizable User Profile** dropdown, select **Authenticated User Options**.![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2Fbpk2p8te4aliR26Z7R1o%2FCustomizable%20User%20Profile%20Menu.png?alt=media)
6. Click the **Edit Default User Profile Menu** dropdown.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2Ff8BLLOd8UugCY0Jb8QdT%2FEdit-Default-User-Profile-Menu.png?alt=media)
7. Click **+ Add Menu item**.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2Fvy8ddnS6RfJkFygKzNey%2FEdit-Default-User-Profile-Menu-dialog.png?alt=media)<br>
8. Select **Site Page** from the **Type** dropdown.
   * Type a name for the menu item in the **New menu Item** field.
   * Select the custom page you want to use from the **Page** dropdown list.\
     ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FmSwdu76pDHVKIR71SSpl%2FMenu%20item%20details.png?alt=media)
9. Click **Save Menu**.
10. Click **Publish**.

## Add a custom component to a custom page

To add a custom component to a custom page:

1. Click **Setup** ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FdQxNRj5hbD0BbkHFBIfP%2FSetup.png?alt=media).
2. Type `All Sites` in the **Quick Find** field and click **All Sites**. The All Sites page appears.

   <img src="https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2Fgi8aNpZP685Z0gNTOROm%2FQuick%20Find%20-%20All%20Sites.png?alt=media" alt="" data-size="original">
3. From the All sites page, click **Builder**.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2Fqnj2SkX8Xs9HKwbGYJw7%2FAll-Sites.png?alt=media)
4. Click **Home** at the top left corner.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FADzr7KwalOuS1ZSUQSq3%2FHome%20button.png?alt=media)
5. Type the name of the custom page in the **Find a page** field, and click the custom page in the results list.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FDVgdXHieCNPCOEqQpq8A%2FFind%20a%20page.png?alt=media)
6. Click Components ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2F3wZ014IbjlxUWRw78ixJ%2FComponents.png?alt=media) on the upper left side of the page. The list displays the components that you can add to the page.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FHWefFuG94uVpNJDjn8W6%2FComponents%20list.png?alt=media)
7. Drag and drop the custom component on the custom page.
8. Click **Publish**.
9. Repeat steps 5 through 8 for remaining custom components you want to add to various pages.

## Add Tax Certificates component on the My Account page

This example shows how to add the Tax Certificates component to the **My Account** page.

To add a tax certificate component on the **My Account** page:

1. Click **Setup** ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FdQxNRj5hbD0BbkHFBIfP%2FSetup.png?alt=media).
2. Type `All Sites` in the **Quick Find** field and click **All Sites**. The All Sites page appears.

   <img src="https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2Fgi8aNpZP685Z0gNTOROm%2FQuick%20Find%20-%20All%20Sites.png?alt=media" alt="" data-size="original">
3. From the All sites page, click **Builder**.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2Fqnj2SkX8Xs9HKwbGYJw7%2FAll-Sites.png?alt=media)
4. Click **Home** at the top left corner.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FADzr7KwalOuS1ZSUQSq3%2FHome%20button.png?alt=media)
5. Type `My Account` in the **Find a page** field, and click **My Account**.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2F35lQLMwyqaEAGA94HL1g%2FMy%20Account%20-%20tax.png?alt=media)
6. Click Components ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2F3wZ014IbjlxUWRw78ixJ%2FComponents.png?alt=media) on the upper left side of the page. The list displays the components that you can add to the page.\
   ![](https://4256002884-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqjgXMvJr1fV9cPhH4Ukz%2Fuploads%2FHWefFuG94uVpNJDjn8W6%2FComponents%20list.png?alt=media)
7. Scroll down to **drb2b\_usersTaxCertificates**.
8. Drag and drop **drb2b\_usersTaxCertificates** to the My Accounts page.
9. Click **Publish**.
