Announcing Dash Bio 1.0.0 ๐ŸŽ‰ : a one-stop-shop for bioinformatics and drug development visualizations.

Is it possible to intergrate ibm-watson webchat to plotly dash?

Hi everyone.

I am new to dash and i created a simple dash app to run. I wanted to add a chatbot to the dash app so i created a bot using ibm watson. Now, i need to intergarte this to dash, how can i do this? I was given the following script to embed into my code

<script>
  window.watsonAssistantChatOptions = {
      integrationID: "c31f0ef4.....", 
      region: "eu-gb", 
      serviceInstanceID: "567bedbe....", 
      onLoad: function(instance) { instance.render(); }
    };
    
    setTimeout(function(){
    const t=document.createElement('script');
    t.src="https://web-chat.global.assistant.watson.appdomain.cloud/loadWatsonAssistantChat.js";
    document.head.appendChild(t);
  });
</script>

Hereโ€™s is my app code

# app info
app = dash.Dash()

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

# data and basic figure
x = np.arange(20)+10

fig = go.Figure(data=go.Scatter(x=x, y=x**2, mode = 'lines+markers'))
fig.add_traces(go.Scatter(x=x, y=x**2.2, mode = 'lines+markers'))

app.layout = html.Div([
    dcc.Graph(
        id='basic-interactions',
        figure=fig,
    ),

    html.Div(className='row', children=[
        html.Div([
            dcc.Markdown(d("""
              Click on points in the graph.
            """)),
            html.Pre(id='hover-data', style=styles['pre']),
        ], className='three columns'),
    ])
])


@app.callback(
    Output('hover-data', 'children'),
    [Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
    return json.dumps(hoverData, indent=2)

app.run_server(port = 8070, dev_tools_ui=True,
          dev_tools_hot_reload =True, threaded=True)

I want to add a chat button at the top which will call on the script and enable the bot.