JavaScript , BODY ? Help

Flow
1

Good night, I need to insert this code on the “BODY” page … of my application only after login, but am I not getting anyone to help me?

<body>
 <script type="text/javascript">var mdChatClient="4C05D25BAB714ADAAC5A6F3DF82EEQWEA";</script>
  <script src="https://chat.movidesk.com/Scripts/chat-widget.min.js"></script>
</body>

Vaadin 15.0.5

2

Hi, glad to hear that you are using Vaadin 15. For this use case, I think maybe you can create a component wrapper for the chat-widget, sth like

@Tag("div")
@JavaScript("https://chat.movidesk.com/Scripts/chat-widget.min.js")
public class ChatComponent extends Component {

}

Then at the time you need to load the chat-widget, you can simply add the ChatComponent there to the view, so that it will load the JavaScript file and render the component as an empty <div>.

3

Thank you, I will test …
but I put it in index.html and then via JS I made it visible or not, it also worked … but it ends up being loaded before the moment I really want …

We had a project in Vaadin 8 and rewrote it in the newest Vaadin …
This is a big challenge, but the result is getting really good

4

Zi Fran:
Thank you, I will test …
but I put it in index.html and then via JS I made it visible or not, it also worked … but it ends up being loaded before the moment I really want …

We had a project in Vaadin 8 and rewrote it in the newest Vaadin …
This is a big challenge, but the result is getting really good

In views created in Java you can use the page.addJavaScript() API in order to add an external script dynamically:

Button button = new Button("Login", e -> {
    doLogin();
    UI.getCurrent().getPage().addJavaScript("https://chat.movidesk.com/Scripts/chat-widget.min.js");
});

Are you using any TypeScript views in your app? In that case an equivalent would be

<vaadin-button @click="${this.handleLogin}">Login</vaadin-button>

...

public handleLogin() {
  this.doLogin();  
  const script = document.createElement('script');
  script.src = 'https://chat.movidesk.com/Scripts/chat-widget.min.js';
  document.body.appendChild(script);
}

Note, that you can set the chat client ID also dynamically if you do not want to show it for non-logged-in users.
In Java (note the extra LoadMode.LAZY to start loading the script after executing the JS snippet):

UI.getCurrent().getPage().executeJs("window.mdChatClient = '4C05D25BAB714ADAAC5A6F3DF82EEQWEA'");
UI.getCurrent().getPage().addJavaScript("https://chat.movidesk.com/Scripts/chat-widget.min.js", LoadMode.LAZY);

In TypeScript:

(window as any).mdChatClient = '4C05D25BAB714ADAAC5A6F3DF82EEQWEA';
const script = document.createElement('script');
...