Hello,
I am trying to work with Custom floating window, For that I have checked the SDK.
But not sure how to Initialize it with my HTML page, can you please help me out?
I have tried below Initialization methods,
Please check them and let me know where is the issue.
Thank you.
Hi @Kumar_B,
Thank you for sharing your issue with us.
I have consulted with the developers responsible for implementing this feature, and they have requested that I share this example with you to test out:
<html>
<head>
<title>Custom UI: Basic HTML example</title>
<script src="https://cdn.jsdelivr.net/npm/@pipedrive/app-extensions-sdk@0.2.0-rc.0/dist/index.umd.js"></script>
<script>
(async function() {
const sdk = await new AppExtensionsSdk().initialize();
})();
</script>
</head>
<body>
<h1>Hello from Custom UI</h1>
</body>
</html>
Can you try this and let me know if it works, please? If you encounter any difficulties, please let me know as well.
Hello,
Thank you for the reply,
I have tried your code, with execute,
<html>
<head>
<title>Custom UI: Basic HTML example</title>
</head>
<body>
<h1>Hello from Custom UI</h1>
</body>
<footer>
<script src="https://cdn.jsdelivr.net/npm/@pipedrive/app-extensions-sdk@0.2.0-rc.0/dist/index.umd.js"></script>
<script>
setTimeout(async function() {
console.log('timeout inside');
const sdk = await new AppExtensionsSdk().initialize();
const { confirmed } = await sdk.execute(Command.SHOW_CONFIRMATION, {
title: 'Confirm',
description: 'Are you sure you want to complete this action?',
});
}, 5000)();
</script>
</footer>
</html>
This is my HTML page, with above code. but when I open this in Pipedrive window, I am getting below error in console.
Uncaught (in promise) ReferenceError: Command is not defined
Thank you
Hi @Kumar_B,
I had our developers check on this. They found two errors in your code and provided a fix:
<html>
<head>
<title>Custom UI: Basic HTML example</title>
</head>
<body>
<h1>Hello from Custom UI</h1>
</body>
<footer>
<script src="https://cdn.jsdelivr.net/npm/@pipedrive/app-extensions-sdk@0.2.0-rc.0/dist/index.umd.js"></script>
<script>
setTimeout(async function() {
console.log('timeout inside');
const sdk = await new AppExtensionsSdk().initialize();
const { confirmed } = await sdk.execute(AppExtensionsSdk.Command.SHOW_CONFIRMATION, {
title: 'Confirm',
description: 'Are you sure you want to complete this action?',
});
}, 5000);
</script>
</footer>
</html>
Can you try this, please? 
Hello @Nicole_Tan
It is working, but for some commands, I am getting ‘Invalid command’ error.
Like, SHOW_FLOATING_WINDOW and SET_FOCUS_MODE
My code
<html>
<head>
<title>Custom UI: Basic HTML example</title>
</head>
<body>
<h1>Hello from Custom UI</h1>
</body>
<footer>
<script src="https://cdn.jsdelivr.net/npm/@pipedrive/app-extensions-sdk@0.2.0-rc.0/dist/index.umd.js"></script>
<script>
setTimeout(async function() {
console.log('timeout inside');
const sdk = await new AppExtensionsSdk().initialize();
await sdk.execute(AppExtensionsSdk.Command.RESIZE, { height: 500 });
const { confirmed } = await sdk.execute(AppExtensionsSdk.Command.SHOW_CONFIRMATION, {
title: 'Confirm',
description: 'Are you sure you want to complete this action?',
});
/*
//Getting Invalid command error for below commands
await sdk.execute(AppExtensionsSdk.Command.SHOW_FLOATING_WINDOW, {
context: {
person_id: 42,
}
});
await sdk.execute(AppExtensionsSdk.Command.SET_FOCUS_MODE, true);
*/
}, 5000);
</script>
</footer>
</html>
Thank you
This topic was automatically closed after 10 days. New replies are no longer allowed.
