Skip to content

Commit 78ee945

Browse files
HectruendoHectruendo
committed
Adding new properties to modify the style on the iframed messages
1 parent 43f0d8d commit 78ee945

File tree

5 files changed

+47
-9
lines changed

5 files changed

+47
-9
lines changed

‎doc/source/modules/widget/index.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,23 @@ Next we will explain all the widget's possible parameters:
9494
"<MESSAGE_TYPE>": {
9595
"src": "<URL>",
9696
"fullWidth": Boolean,
97+
"mobileNoMargins": Boolean,
98+
"desktopNoMargins": Boolean,
9799
"dynamicHeight": Boolean,
98100
"scrolling": "yes"/"no",
99101
"noPadding": Boolean
100102
}
101103
}
102104
```
103-
The widget will intercept any message with the type `<MESSAGE_TYPE>` and will render an iframe with the provided URL. The rest of the parameters are optional and will be used to customize the iframe's behavior.
105+
The widget will intercept any message with the type `<MESSAGE_TYPE>` and will render an iframe with the provided URL. The rest of the parameters are optional and will be used to customize the iframe's styling and behavior, next you can see the explanation of each parameter:
106+
107+
- `src`<span style="color:red;">*</span>: URL of the iframe.
108+
- `fullWidth`: If the iframe should take the full width of the chat's message in which it is contained.
109+
- `mobileNoMargins`: If the message in which the iframe is contained should have no margins on mobile.
110+
- `desktopNoMargins`: If the message in which the iframe is contained should have no margins on desktop.
111+
- `dynamicHeight`: If the iframe should have a dynamic height, this will make the iframe's height to be the same as its content's height.
112+
- `scrolling`: If the iframe should have scrolling, by default the iframe will have scrolling.
113+
- `noPadding`: If the message in which the iframe is contained should have no padding, by default the message will have padding.
104114

105115

106116
### JS Library
@@ -135,6 +145,8 @@ The widget will intercept any message with the type `<MESSAGE_TYPE>` and will re
135145
"iframe": {
136146
"src": "https://localhost:3000/iframed-msg",
137147
"fullWidth": true,
148+
"mobileNoMargins": true,
149+
"desktopNoMargins": true,
138150
"dynamicHeight": true,
139151
"scrolling": "np",
140152
"noPadding": true
@@ -180,7 +192,7 @@ If you declare data attributes and a config object and its keys collide, then th
180192
data-only-chat
181193
data-fit-to-parent
182194
data-initial-conversation-metadata='{"hello": "world"}'
183-
data-custom-iframed-msgs='{"iframe": {"src": "https://localhost:3000/iframed-msg", "fullWidth": true, "dynamicHeight": true, "scrolling": "np", "noPadding": true}}'
195+
data-custom-iframed-msgs='{"iframe": {"src": "https://localhost:3000/iframed-msg", "mobileNoMargins": true, "desktopNoMargins": true, "fullWidth": true, "dynamicHeight": true, "scrolling": "np", "noPadding": true}}'
184196
></chatfaq-widget>
185197
```
186198

‎widget/README.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,23 @@ Next we will explain all the widget's possible parameters:
9494
"<MESSAGE_TYPE>": {
9595
"src": "<URL>",
9696
"fullWidth": Boolean,
97+
"mobileNoMargins": Boolean,
98+
"desktopNoMargins": Boolean,
9799
"dynamicHeight": Boolean,
98100
"scrolling": "yes"/"no",
99101
"noPadding": Boolean
100102
}
101103
}
102104
```
103-
The widget will intercept any message with the type `<MESSAGE_TYPE>` and will render an iframe with the provided URL. The rest of the parameters are optional and will be used to customize the iframe's behavior.
105+
The widget will intercept any message with the type `<MESSAGE_TYPE>` and will render an iframe with the provided URL. The rest of the parameters are optional and will be used to customize the iframe's styling and behavior, next you can see the explanation of each parameter:
106+
107+
- `src`<span style="color:red;">*</span>: URL of the iframe.
108+
- `fullWidth`: If the iframe should take the full width of the chat's message in which it is contained.
109+
- `mobileNoMargins`: If the message in which the iframe is contained should have no margins on mobile.
110+
- `desktopNoMargins`: If the message in which the iframe is contained should have no margins on desktop.
111+
- `dynamicHeight`: If the iframe should have a dynamic height, this will make the iframe's height to be the same as its content's height.
112+
- `scrolling`: If the iframe should have scrolling, by default the iframe will have scrolling.
113+
- `noPadding`: If the message in which the iframe is contained should have no padding, by default the message will have padding.
104114

105115

106116
### JS Library
@@ -135,6 +145,8 @@ The widget will intercept any message with the type `<MESSAGE_TYPE>` and will re
135145
"iframe": {
136146
"src": "https://localhost:3000/iframed-msg",
137147
"fullWidth": true,
148+
"mobileNoMargins": true,
149+
"desktopNoMargins": true,
138150
"dynamicHeight": true,
139151
"scrolling": "np",
140152
"noPadding": true
@@ -180,7 +192,7 @@ If you declare data attributes and a config object and its keys collide, then th
180192
data-only-chat
181193
data-fit-to-parent
182194
data-initial-conversation-metadata='{"hello": "world"}'
183-
data-custom-iframed-msgs='{"iframe": {"src": "https://localhost:3000/iframed-msg", "fullWidth": true, "dynamicHeight": true, "scrolling": "np", "noPadding": true}}'
195+
data-custom-iframed-msgs='{"iframe": {"src": "https://localhost:3000/iframed-msg", "mobileNoMargins": true, "desktopNoMargins": true, "fullWidth": true, "dynamicHeight": true, "scrolling": "np", "noPadding": true}}'
184196
></chatfaq-widget>
185197
```
186198

‎widget/components/chat/msgs/ChatMsg.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
[props.message.sender.type]: true,
55
'is-first': props.isFirst,
66
'is-last': props.isLast,
7-
'maximized': store.maximized
7+
'maximized': store.maximized,
8+
'mobile-no-margins': iframedMsg && iframedMsg.mobileNoMargins,
9+
'desktop-no-margins': iframedMsg && iframedMsg.desktopNoMargins,
810
}">
911
<div
1012
class="message"
@@ -125,7 +127,6 @@ $phone-breakpoint: 600px;
125127
.message-wrapper {
126128
display: flex;
127129
flex-direction: column;
128-
129130
&.bot {
130131
margin-left: 24px;
131132
margin-right: 86px;
@@ -201,6 +202,19 @@ $phone-breakpoint: 600px;
201202
align-self: end;
202203
}
203204
}
205+
206+
&.mobile-no-margins {
207+
@media only screen and (max-width: $phone-breakpoint) {
208+
margin-left: 5px;
209+
margin-right: 5px;
210+
}
211+
}
212+
&.desktop-no-margins {
213+
@media only screen and (min-width: $phone-breakpoint) {
214+
margin-left: 5px;
215+
margin-right: 5px;
216+
}
217+
}
204218
}
205219
206220
.stack-wrapper {

‎widget/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎widget/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "chatfaq-widget",
3-
"version": "0.0.67",
3+
"version": "0.0.68",
44
"private": false,
55
"main": "./dist/chatfaq-widget.umd.cjs",
66
"module": "./dist/chatfaq-widget.mjs",

0 commit comments

Comments
 (0)