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.