[DONE] Internal CSS Deleted on Source Code

[Luis]

When trying to add internal CSS tags <style>...</style> in File > Source code in either the “Display a message on a web page” or “Create a PDF” actions editor, the CSS tag is deleted completely. Here is how it happens:

Do note that inline CSS works fine.

QUESTIONS:

• How much flexibility do we have over the CSS with the Tape editor? In Globiflow “Display Page flow”, we could use internal CSS tags, meaning we could alter the webpage almost entirely.

• Does Tape allow private label of the webpage link (from mydomain instead of weblink.tapeapp)?

• Can we host our own CSS and index/page files from our website server and use Tape variables on that page? Check “Private Labelling GlobiFlow External Link Flows” to see what I mean.

[Ben]

Hey @Luis ,
sorry that we did not document this use-case yet. In order to add custom CSS styles, you have to first store them in a custom variable and then append that variable to your HTML document:

Script action:

var_css = `
<style>
body {
    background: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}
</style>
`;

I will write a tutorial on this soon!

Cheers,
Ben

[Leo]

Hi @Luis,

using your own domain and hosting your own CSS and index/page files from your website server and than use Tape variables on the “Display a message on a web page” action are currently not yet available, but could definitely be integrated.
Feel free to submit a feature request for these two requirements.
I hope you are not blocked in the meantime to implement your use cases?

Cheers
Leo

[Luis]

Thank you, Ben. That worked fantastically well.

[Luis]

Hosting from our company domain is mostly to maintain clients seeing all communications coming from our business domain. As for hosting the CSS and index file externally gives me full flexibility because I won’t have to work around Tape’s default CSS styling.

It is honestly not a big deal because, with the solution Ben provided, we can get around most of it with some effort. The first thing was eliminating the “Try Tape” top-right banner that automatically appears on the page. That is to maintain branding consistency since we want to show our business logos on those pages to our clients. Here is the code I used to remove the Tape banner:

.css-l0y2dn {
  display: none !important;
}

[Leo]

Excellent work, @Luis! However, if you ever find yourself being blocked while trying to implement your use cases and can’t proceed with a workaround, don’t hesitate to reach out to us.

Best
Leo