Customer Portal

Get Involved. Join the Conversation.

Topic

    David Riedel
    CSS Customizing in the new chat inlayAnswered
    Topic posted April 1, 2019 by David RiedelBronze Medal: 1,250+ Points 
    131 Views, 6 Comments
    Title:
    CSS Customizing in the new chat inlay
    Summary:
    How can we customize styling (css, images) in the new chat inlay
    Content:

    Hi,

    is there a way to customize the new chat inlay with regards to CSS.

    Want to change colors, fonts etc.

    This is necessary in order to be able to adopt it for our clients.

    Thank you!

    David

    Version:
    18D

    Best Comment

    Willie Eide

    Ok. Couple of comments.
    1) I don't think you can achieve this with today's capabilities. Sure you can inject into the current CSS, but if we ever changed the internals of our Inlays, this would break your implementation.
    2) I queried about the SASS to Dynamic CSS to the OJET team and it looks like it was pushed out a release so that may not happen until early 2020 instead of what I was expected in late 2019.
    3) You mention images... that should be changed by attributes unless you are talking about our system images that we are following.

    Two solutions I can come up with to help you out is that we:
    a) Publish the OIT-Theme project on github so you can create your own SASS (while we still support SASS) file and point to it in your own location.
    b) Pass the requirements onto me and I can build a specific theme file for you -- obviously this isn't scalable and I can't do it for everybody but I am wanting to please customers and get some traction on usage.
     

    Comment

     

    • Willie Eide

      There is an out of the box capability to change the colors to one of ten predefined color schemes.
      I realize this may not meet your needs, but until we can provide dynamic CSS variables - we do not recommend changing the internal CSS due to backward compatibilty issues.

      To chage colors (branding) you would add a theme attribute to your script tag such as data-oit-theme-url=https://static-va.custhelp.com/s/oit/latest/themes/oracle/dijon/web/theme.css where the theme "dijon" can be one of ten different provided themes - autumn, coffee, crimson, emerald, indigo, lilac, midnight, plum and shipyard
       

    • David Riedel

      Hi Willie,

      thank you for your answer but 10 different templates are useless if you want to embed the chat inlay on a client's customer facing website. It is a necessity to design it pixel perfect (html+css) to be usable on a client's website.

      So the only solution would be to change the internal CSS I guess, but every week it can be destroyed because of new updates. 

      Do you know how it is planned to achieve a complete individual design in the future? As it is in the standard chat widget nowadays.

      Thanks a lot

      David

      • Willie Eide

        Well, I wouldn't call it useless. We have a number of customers actively using various themes without problem. 

        You are correct that if you change the internal CSS it can/will be problematic if we decided to change internal references.

        We are eagerly awaiting changes within the OJET team to transition from compiled SASS themes to dynamic CSS variables that can be changed on the fly. By doing this, customers/partners such as yourself can modify the 1000+ variables to achieve the pixel perfectness you desire.

        Please DM me as I would like to see what challenges you have in meeting the design requirements from your customers. I can use this as a guidepost for future development to assure that we are meeting your needs going forward.

        Willie Eide

    • David Riedel

      Hi Willie,

      here are the requirements: 

      • Font (type = Myriad Pro, color, size, style etc.)
      • Background color change to RGB 118/37/101
      • Images (replace them)
      • Other CSS related stuff like different sizing of elements.

       

      I hope I am able somehow to achieve this with the current version as the client want's to use this chat functionality already in June.

      Do you know when the proclaimed change from SASS themes to dynamic CSS variables will happen? Could it be already this summer or do we have to wait longer?

      Thanks a lot for your help, I appreciate this very much!

      David

      • Willie Eide

        Ok. Couple of comments.
        1) I don't think you can achieve this with today's capabilities. Sure you can inject into the current CSS, but if we ever changed the internals of our Inlays, this would break your implementation.
        2) I queried about the SASS to Dynamic CSS to the OJET team and it looks like it was pushed out a release so that may not happen until early 2020 instead of what I was expected in late 2019.
        3) You mention images... that should be changed by attributes unless you are talking about our system images that we are following.

        Two solutions I can come up with to help you out is that we:
        a) Publish the OIT-Theme project on github so you can create your own SASS (while we still support SASS) file and point to it in your own location.
        b) Pass the requirements onto me and I can build a specific theme file for you -- obviously this isn't scalable and I can't do it for everybody but I am wanting to please customers and get some traction on usage.