-
Notifications
You must be signed in to change notification settings - Fork 0
1 Integration
Sumo Custom is very easy to integrate with any web application or website. Easiest way is to use the <iframe> tag. Just add iframe-tag to body of your html:
<iframe id="sumo" src="https://custom.sumo.app"></iframe>Use any of the query parameters and commands to make it perfect for you. You can also save all the settings to your reserved Sumo app using the app parameter. Read more from the next chapter: Query Parameters
<iframe id="sumo" title="My Custom Studio" src="https://custom.sumo.app?app=custom"></iframe>If you want to show your own navigation menu or banner, you might want to use div around to control the size of the element.
<div style="position:absolute;top:64px;left:0px;right:0px;bottom:0px">
<iframe id="sumo" title="My Custom Studio" src="https://custom.sumo.app?app=aracing"></iframe>
</div>Tip: You might want to modify the iframe element styles to fit the parent div without any borders or margins.
iframe { width:100%; height:100%; margin:0; padding:0; border:0; vertical-align:bottom; display:block; }Query parameters allow you to initialize the application with your own settings. You can change how the app looks, which tools are available, what are the default values, change the image parameters and much more.
See complete list of query parameters
With commands, you can send messages to custom paint run time. Command is a postMessage call with Javascript from another window, tab or document, to tell custom paint to perform actions. You can control the image, layers, effects, undo history and almost everything that is inside your custom paint application.
Messages are calls from the app to outside listeners, like the parent document.
Check out our examples how to get started with the integration.