How to embed Confluence page in website with confluence styles

[Mandy Wells-Lakeland]

Hi Guys,

I need to embed some of our Confluence pages into our website. I'm able to retrieve the HTML content, but is there any way to preserve the styles as well?

I want to display them exactly as they appear on the Confluence page.

I've tried numerous API calls, and the closest one I found still doesn't match the styling of the Confluence page.

params = {
    'status': 'any',
    'expand': 'body.export_view.webresource.superbatch.tags.all,body.export_view.webresource.tags.all,body.storage',
}

https://XXX.atlassian.net/wiki/rest/api/content/XXX?params=params

Thank you!

[Mandy Wells-Lakeland · Accepted solution]

Hi @Andrii Maliuta

Thank you for your advice. I tried with ```body.styled_view```, but many features such as "expand (accordion)" and info panels wouldn't work on the webpage. The table styling also does not match the Confluence style.

Here is the html content with style returned from ```body.styled_view``` - https://drive.google.com/file/d/1Vvhjvq96IPmfAF4JRGtpzCmD7c2ijXfD/view?usp=sharing

Below is the screenshot of the Confluence test page embedded on the website;

Below is the screenshot of the test page from confluence;

[Andrii Maliuta]

Hello @Mandy Wells-Lakeland ,

I suppose that you need all CSS and JS resources necessary for AUI (https://aui.atlassian.com/aui/latest/docs/getting-started.html) to work:

1. jquery
2. sinon
3. aui.js

E.g.:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/@atlassian/aui@8.6/dist/aui/aui-prototyping.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>
<script src="https://unpkg.com/@atlassian/aui@8.6/dist/aui/aui-prototyping.js"></script>

You can check the https://aui.atlassian.com/aui/latest/docs/getting-started.html docs to see how to get started.

And also there is newer React-based libs Atlaskit (https://atlaskit.atlassian.com/) from Atlassian that can be used to have design as in Atlassian products. You can refer to https://atlaskit.atlassian.com/ to see how to install the components.

[Mandy Wells-Lakeland]

Thanks @Andrii Maliuta I've come very close to replicating the Confluence style on my website thanks to your feedback. The expand/accordion component is now working.  However, there are still a few components, such as "Layouts" from Confluence pages, that aren't quite working as expected, but I can style them manually. Here's my test page again. Overall, I'm quite pleased with the 90% match achieved. Since I'm using Python/Django, React-based libs Atlaskit  won't work for me. Thanks again for your help. 

[Andrii Maliuta · Accepted solution]

Hello @Mandy Wells-Lakeland ,

You can try to add ```body.styled_view``` expand parameter to have the whole HTML content with styles.