Hi Andrew,
It sounds like the SDK is using an iFrame? Is this right?
If so this is always a problem when using iFrames, because the content is loaded outside the main website dom. So the height is always calculated incorrectly.
You have a couple of options to try to fix this. I believe there is some handy javascript libraries that help with calculating the height of the iFrame.
Your other option is use V height css option. This is a much easier way of making sure your iframe fits the entire space. Rather than using 100% height and data being cut off. Because 100% of a height that is yet to be calculated will always cut content off.
.class{
height: 100vh;
overflow-y: scroll;
}
Based on the quote you shared from the SDK, it looks like you're working on integrating with Support.com, and it sounds like you've moved from option 1 (Embed API) to option 2 (JavaScript API) in this article. So, I don't think you should have an iframe anymore. If the content is just getting placed in a div, you should just be able to remove any height styling on that div to allow it to grow to whatever height it needs to.
Can you share with us the DOM structure of your page as it renders in your browser? Perhaps we can see where things go wrong.
UPDATE:
Check out this part of the SDK article. I think it's intended to solve your problem, as it registers a callback function that you can use to set the height of the iframe.
Resize - In case an embedding application wants to resize it’s height based on the loaded content height then you should register your callback handler to onSelfserviceContainerHeightChange.
Callback handler passed to this method is invoked whenever content height is changed.
NexusConnectSDK.onSelfserviceContainerHeightChange(function (height) {
var $frame = $('iframe');
if($frame.length) {
$frame.css('height', height);
}
});
<div id="helpContainer" style="display: block; width: auto; height: 200vh;"><iframe title=" Self-Service content" src="https://advdiag.nexus.support.com/api/selfservice/v1.1.1/startSelfHelp?session_id=1128664&session_context_id=10832&session_device_id=956327&auth_token=...-12M&options=%7B%22phone%22%3A%221-800-GETHELP%22%2C%22skill%22%3A%22sales%22%2C%22remoteConnectionType%22%3A%22remote%22%7D&lang=en&display_order=search%2Ccategories%2Cpaths%2Ccontact_us" height="97%" width="100%" style="border: 0px;"></iframe></div>
<iframe title=" Self-Service content" src="https://advdiag.nexus.support.com/api/selfservice/v1.1.1/startSelfHelp?session_id=1128664&session_context_id=10832&session_device_id=956327&auth_token=...-12M&options=%7B%22phone%22%3A%221-800-GETHELP%22%2C%22skill%22%3A%22sales%22%2C%22remoteConnectionType%22%3A%22remote%22%7D&lang=en&display_order=search%2Ccategories%2Cpaths%2Ccontact_us" height="97%" width="100%" style="border: 0px;"></iframe>
This is the snippet we added to the SDK.js file to initialize the feature we are incorporating.
NexusConnectSDK.initialize("TOKEN");
NexusConnectSDK.setDisplayOrder(["search","categories","paths","contact_us"]);
NexusConnectSDK.setContactUsOptions({"phone":"1-800-GETHELP","skill":"sales","remoteConnectionType":"remote"});
NexusConnectSDK.preserveContext(true)
var containerElement = document.getElementById("helpContainer");
NexusConnectSDK.showSelfHelpForId("text",containerElement).then(
function(){
containerElement.style.display = "block";
console.log("Success!");
}, function(error){
console.error("Error: " + error);
}
);
The "helpcontainer" is the additional HTML snippet used to contain the content rendered from SDC iframe that you see in the first snippet at the top. I tried running it without housing in a container but came with really bad results as it just overlaid itself over the entire mobile app.