# Third Party Styling

## Introduction/Brief

Intercom has this widget in the bottom right hand corner that does magic things.
We need it to shift up and down according to our own app's behavior, to avoid blocking stuff.

## Constraints

1. Intercom built in a really easy way of adjusting the vertical padding of their component, but because we implemented intercom through Segment, we have no access to configure intercom. 😞

2. Intercom's components are `iframe` elements (a few of them actually). Luckily we can apply styles to the iframes, and this allows us to move the widgets up and down. But we may have to apply slightly different styles to each iframe, instead of applying universal styles to a single iframe.

3. The widget has to dynamically reposition itself on the same screen in response to user behavior, and support multiple "levels" of padding

4. The widget still has to be on all our other screens at the original position.

5. The widget is not necessarily present at first load or even at all (pesky adblockers).

## Methods explored

We ultimately chose the Dynamic Stylesheet Injection as it

### Dynamic Style Injection via the `style` _attribute_

1. Find the specific iframe elements when repositioning is required
2. If found, apply specific styles to those elements, via dom manipulation

```javascript
if (low) {
  return document.getElementsByName('intercom-launcher-frame')[0]
    .style
    .marginBottom = "75px"
}

return document.getElementsByName('intercom-launcher-frame')[0]
  .style
  .marginBottom = "145px"
```

GOOD:

- pretty low effort change, and really simple and direct

BAD:

- Elements were not necessarily there when we needed them (especially first load)
- When they first loaded, they could not be repositioned until a repositioning event occured.

### Dynamic Class Injection with a static stylesheet

1. Load a static stylesheet with our custom padding styles

```css
.intercom-padding-low {
  margin-bottom: 75px;
}

.intercom-padding-high {
  margin-bottom: 145px;
}
```

2. Find the specific iframe elements when repositioning is required and inject the specific class names for the specific level of padding required

```javascript
if (low) {
  return document.getElementsByName('intercom-launcher-frame')[0]
    .classList
    .add('intercom-padding-low')
}

return document.getElementsByName('intercom-launcher-frame')[0]
  .classList
  .add('intercom-padding-high')
```

GOOD:

- static styles?

BAD:

- Same as above
- Plus now we have to define custom css for each level of padding _wtf we are not doing this._

### Dynamic Stylesheet Injection via a `style` _element_

1. _Render_ a `<style>` tag conditionally with dynamically set css. Css in the dynamic stylesheet targets the original classes

```javascript
render() {
  return (
    <style type="text/css">
    {`
    .intercom-launcher-frame {
      margin-bottom: ${margin}px
    }
    `}
    </style>
  )
}
```

GOOD:

- Wow I get to actually write this declaratively as react code instead of some imperative dom js hack
- Because this stylesheet targets the original classes, it's in effect on first load, and whenever 😄

BAD:

- This is not a standard way of writing styles, so tooling support is poor (no syntax highlighting for example)