Skip to main content
The Lead Scoring project uses the Shimoku API to create an interactive dashboard that visualizes predictions and helps sales teams prioritize leads effectively.

​
Shimoku Client Setup

​
Authentication

The dashboard requires three environment variables for authentication: 
# From app.py:39-41
access_token = os.getenv('SHIMOKU_TOKEN')
universe_id: str = os.getenv('SHIMOKU_UNIVERSE_ID')
workspace_id: str = os.getenv('SHIMOKU_WORKSPACE_ID')
Set these environment variables before running the application:
  • SHIMOKU_TOKEN: Your Shimoku API access token
  • SHIMOKU_UNIVERSE_ID: Your universe identifier
  • SHIMOKU_WORKSPACE_ID: Your workspace identifier

​
Client Initialization

# From app.py:43-51
s = shimoku.Client(
    access_token=access_token,
    universe_id=universe_id,
    async_execution=True,
    verbosity='INFO',
)
s.set_workspace(workspace_id)
s.set_board('Lead Scoring Board')
s.set_menu_path('Lead Scoring')
The client is configured with:
  • async_execution=True: Enables asynchronous task execution for better performance
  • verbosity=‘INFO’: Provides informative logging during dashboard creation
  • Board: “Lead Scoring Board” - The dashboard container
  • Menu Path: “Lead Scoring” - Navigation path in the Shimoku interface

​
Dashboard Components

The dashboard consists of three main components, each added as a separate task:

​
1. Page Header

Creates a styled header banner with title and description: 
# From aux.py:36-68
def page_header(shimoku_client: shimoku.Client, order: int):
    prediction_header = (
        "<head>"
        "<style>"  # Styles title
        ".component-title{height:auto; width:100%; "
        "border-radius:16px; padding:16px;"
        "display:flex; align-items:center;"
        "background-color:var(--chart-C1); color:var(--color-white);}"
        "</style>"
        # Start icons style
        "<style>.big-icon-banner"
        "{width:48px; height: 48px; display: flex;"
        "margin-right: 16px;"
        "justify-content: center;"
        "align-items: center;"
        "background-size: contain;"
        "background-position: center;"
        "background-repeat: no-repeat;"
        "background-image: url('https://uploads-ssl.webflow.com/619f9fe98661d321dc3beec7/63594ccf3f311a98d72faff7_suite-customer-b.svg');"
        "</style>"
        # End icons style
        "<style>.base-white{color:var(--color-white);}</style>"
        "</head>"  # Styles subtitle
        "<div class='component-title'>"
        "<div class='big-icon-banner'></div>"
        "<div class='text-block'>"
        "<h1>Predictions</h1>"
        "<p class='base-white'>"
        "Lead scoring prediction</p>"
        "</div>"
        "</div>"
    )
    shimoku_client.plt.html(html=prediction_header, order=order)

​
2. Prediction Table

Displays individual lead predictions with color-coded classes: 
# From aux.py:70-91
def prediction_table(shimoku_client: shimoku.Client, order: int, binary_prediction_table: pd.DataFrame):
    prediction_table_header = (
        '<div style="width:100%; height:90px; "><h4>Lead predicton & factors</h4>'
        '<p>Affectation values for each lead</p></div>'
    )
    shimoku_client.plt.html(html=prediction_table_header, order=order)

    label_columns = get_label_columns(binary_prediction_table)

    shimoku_client.plt.table(
        order=order+1, data=binary_prediction_table,
        label_columns=label_columns,
        columns_options={
            'Observation': {'width': 182},
            'Predicted Class': {'width': 203},
            'Use Case': {'width': 178},
            'Discount code': {'width': 206},
            'Loss Reason': {'width': 199},
            'Source': {'width': 159},
            'City': {'width': 154},
        }
    )
The table includes customized column widths for optimal readability and uses the color-coded labels defined in get_label_columns().

​
3. Table Explanation

Adds a styled informational banner below the table: 
# From aux.py:93-110
table_explanaiton = (
    "<head>"
    "<style>.banner"
    "{height:100%; width:100%; border-radius:var(--border-radius-m); padding:24px;"
    "background-size: cover;"
    "background-image: url('https://ajgutierrezcommx.files.wordpress.com/2022/12/bg-info-predictions.png');"
    "color:var(--color-white);}"
    "</style>"
    "</head>"
    "<a href='https://shimoku.webflow.io/product/churn-prediction' target='_blank'>"  # link
    "<div class='banner'>"
    "<p class='base-white'>"
    "This table containing the class predictions and associated probabilities."
    "</p>"
    "</div>"
    "</a>"
)
shimoku_client.plt.html(html=table_explanaiton, order=order+2)

​
Running the Dashboard

1

Generate Predictions

The model training pipeline is executed first to generate prediction data:
# From app.py:34-36
trainer = ModelTraining()
data = trainer.run()
2

Create Dashboard Tasks

Dashboard components are added as asynchronous tasks:
# From app.py:54-56
page_header(s, 0)
prediction_table(s, 7, data['predictions_df'])
# distribution_chart(s, 11, data['doughnut_chart_data'])
The order parameter controls component placement on the dashboard.
3

Execute Tasks

All queued tasks are executed asynchronously:
# From app.py:59
s.run()

​
Complete Application Flow

# From app.py:33-62
def main():
    # Get the data dictionary
    trainer = ModelTraining()
    data = trainer.run()

    # Client initialization
    access_token = os.getenv('SHIMOKU_TOKEN')
    universe_id: str = os.getenv('SHIMOKU_UNIVERSE_ID')
    workspace_id: str = os.getenv('SHIMOKU_WORKSPACE_ID')

    s = shimoku.Client(
        access_token=access_token,
        universe_id=universe_id,
        async_execution=True,
        verbosity='INFO',
    )
    s.set_workspace(workspace_id)
    s.set_board('Lead Scoring Board')
    s.set_menu_path('Lead Scoring')

    # Create dashboard tasks
    page_header(s, 0)
    prediction_table(s, 7, data['predictions_df'])
    # distribution_chart(s, 11, data['doughnut_chart_data'])

    # Execute all tasks
    s.run()

if __name__ == '__main__':
    main()

​
Dashboard Features

Color-Coded Classes

Predicted classes are visually distinguished with green (Closed Won), red (Closed Lost), and yellow (Other) labels.

Customizable Columns

Column widths are optimized for readability, showing lead features and predictions side-by-side.

Async Execution

Dashboard components render asynchronously for faster load times.

Styled Components

Custom HTML/CSS styling creates a professional, branded dashboard appearance.
The dashboard uses Shimoku’s plotting interface (shimoku_client.plt) to add both HTML components and data tables.

​
Future Enhancements

The codebase includes a placeholder for a distribution chart: 
# From aux.py:112-113
def distribution_chart(shimoku_client: shimoku.Client, order: int, doughnut_chart_data: Dict):
    shimoku_client.plt.free_echarts(raw_options=doughnut_chart_data, order=order, cols_size=5, rows_size=2)
This function can be activated to visualize the probability distribution across quartiles using ECharts integration.

Build docs developers (and LLMs) love

Get started for freeTalk to us