Inline

Inline

To add the inline integration to a website, this code should be added within the <body> tag.

<!-- Solvemate -->
<script>
(function(s,o,l,v,e,m,a,t){t='solvemateConfig';s[e]=s[e]||function(x,y)
{(s[t]=s[t]||{})[x]=y;};a=o.createElement(l);a.async=1;a.src=v;o.body.appendChild(a);
})(window,document,'script','https://widget.solvemate.com/v2/init.js','solvemate');

solvemate('projectID', 'your_project_id');
solvemate('inlineContainerId', 'my-container');
solvemate('hideBeacon', true);
solvemate('hideGreeting', true);
</script>
<!-- End Solvemate -->

The element ID of the target container must be defined as inlineContainerId.

Example

<div 
    id="my-container" 
    style="width: 540px; height: calc(100vh - 100px); box-shadow: 5px 10px 20px #888888;">
</div>

Design notes

Frame base is 540x600px.

If different dimensions are set for the container, the header will use the entire available width but content elements will be centred.

Responsive integration

To ensure optimal user experience on smaller screen sizes we recommend to set a dynamic height property for the container e.g. height: calc(100vh - 100px).