1. Access the Platform

    Log in to your IDXAddons platform account

    In the main menu, select the Agents Widget App option.

  2. Introduction to the Agent App

    Learn how to use the Agents Widget app to manage and display agent profiles on your website. Note: Ensure your agent's information is up to date inside your IDX Broker account first.

  3. Setup Tab & Widget Options

    Upon accessing the app, you will see the Setup tab. In the first section, there is a data table where you can update social media links for agents. The table includes the following fields:

    • Agent ID
    • Display Name
    • Email
    • Cell Phone
    • Social Media
    • Primary County

    For the Social Media field, there is an edit button. Clicking it opens a pop-up window, which displays the agent's name and fields to input URLs for Facebook, Twitter, Instagram, and LinkedIn. Once all the information is entered, click the "Update Social Media" button.

    For the Primary County field, clicking it will open a pop-up window with the agent's name and a dropdown selector to choose a county from the available options. After selecting the county, click the update button to save the changes. Additionally, there's a Refresh Agents Info button to update the data directly from IDX Broker.


    Widget Section

    Scrolling down, you will find the Widget section. Here you can choose filters to display specific agents by state, city, county, or ZIP code. Click the select dropdown and pick the most relevant option.

    Once a filter is chosen, a Filter Values dropdown will appear with options based on the selected filter.


    Title

    You can then add a Title, which will be displayed as a header above the widget.


    Color Selection

    Choose a base color for the carousel buttons and dots using the color selection option.


    Custom Sorting (Sort By)

    The Sort By option lets you control the exact order in which your agents appear on your website. You have two options:

    • Alphabetically (A-Z): Agents are sorted automatically by name.
    • Custom: You manually define the display order using a drag-and-drop interface. This is the recommended option if you want to highlight specific agents first — for example, your top producers or team leads.

    To use the Custom option, select it from the Sort By dropdown. A new window will open showing all your agents as draggable cards. Simply drag them into your preferred order and click "Save Order" to apply the changes. The widget will immediately reflect the new sequence.

  4. Themes Tab

    In the "Themes" tab, you can select the layout design for your Agents Widget. We now offer 5 different formats to best fit your website:

    • Default & Clovis: Interactive Carousel formats that slide horizontally.
    • Summit, Horizon & Phoenix: Modern Grid formats, perfect for creating a full "Meet the Team" directory page.

    Simply click on the theme you prefer. The code snippet at the bottom of the page will automatically update based on your selection.

  5. Style Tab (Customization)

    The "Style" tab allows you to easily customize the look of the Grid themes (Summit, Horizon, and Phoenix) without writing any CSS code. You can modify:

    • Box Settings: Adjust the Box Radius (rounded corners), Box Background Color, and Box Text Color.
    • Button Settings: Change the Button Background Color, Text Color, Hover Background Color, and Hover Text Color.
    • Fonts: Choose between Serif or Sans-serif font families for both Featured fonts and Main fonts.

    If you want to revert to the original design, you can click "Apply Styles" under the default settings option. Once you are happy with the preview, click Save Styles. Finally, scroll down to the Code Snippet section and click "Copy Code" to embed the widget on your website.

  6. Agent Information in IDX Broker

    To access detailed information about your agent, log in to the IDX Broker dashboard using the following link: Account > Users > Agents

    In the agent dashboard, you will find comprehensive information about your agents, including full names, user IDs, emails, categories, last login times, and available tools. Here, you can:

    • Edit an Agent: Click the "Edit" button to open a new window where you can modify your agent's details. Once done, click the "Save Changes" button to save your edits.
    • Login as Agent: Use the login button to access the system as an agent.
    • View Agent Bio: Click the button to view the agent's biography.
    • Send Password to Agent: Use this option to send a password reset link to your agent.

    If you need to create a new agent, click the Add Agent button. A new window will open where you can fill in the required fields. After filling out the necessary information, click the "Save Changes" button to add the new agent.

    When you create your new agent, you must go back to the Agents Widget app and click on the Refresh Agents Info button so the new information is synced and your new agent appears in the list.