Skip to content

flex message simulator example

찰스 edited this page Jul 21, 2023 · 14 revisions

Restaurant

var request = new FlexMessage()
{
    AltText = "flex restaurant message test",
    Contents = new Bubble()
    {
        Hero = new ImageComponent()
        {
            Url = "https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_1_cafe.png",
            Size = "full",
            AspectRatio = "20:13",
            AspectMode = AspectModeType.Cover,
            Action = new UriAction()
            {
                Uri = "http://linecorp.com/"
            }
        },
        Body = new BoxComponent()
        {
            Layout = BoxLayoutType.Vertical,
            Contents = new List<IComponent>()
            {
                new TextComponent()
                {
                    Text = "Brown Cafe",
                    Weight = WeightType.Bold,
                    Size = "xl"
                },
                new BoxComponent()
                {
                    Layout = BoxLayoutType.Baseline,
                    Margin = "md",
                    Contents = new List<IComponent>()
                    {
                        new IconComponent()
                        {
                            Size = "sm",
                            Url = "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
                        },
                        new IconComponent()
                        {
                            Size = "sm",
                            Url = "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
                        },
                        new IconComponent()
                        {
                            Size = "sm",
                            Url = "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
                        },
                        new IconComponent()
                        {
                            Size = "sm",
                            Url = "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
                        },
                        new IconComponent()
                        {
                            Size = "sm",
                            Url = "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png"
                        },
                        new TextComponent()
                        {
                            Text = "4.0",
                            Size = "sm",
                            Color = "#999999",
                            Margin = "md",
                            Flex = 0
                        }
                    }
                },
                new BoxComponent()
                {
                    Layout = BoxLayoutType.Vertical,
                    Margin = "lg",
                    Spacing = "sm",
                    Contents = new List<IComponent>()
                    {
                        new BoxComponent()
                        {
                            Layout = BoxLayoutType.Baseline,
                            Spacing = "sm",
                            Contents = new List<IComponent>()
                            {
                                new TextComponent()
                                {
                                    Text = "Place",
                                    Color = "#aaaaaa",
                                    Size = "sm",
                                    Flex = 1
                                },
                                new TextComponent()
                                {
                                    Text = "Miraina Tower, 4-1-6 Shinjuku, Tokyo",
                                    Wrap = true,
                                    Color = "#666666",
                                    Size = "sm",
                                    Flex = 5
                                }
                            }
                        }
                    }

                },
                new BoxComponent()
                {
                    Layout = BoxLayoutType.Baseline,
                    Spacing = "sm",
                    Contents = new List<IComponent>()
                    {
                        new TextComponent()
                        {
                            Text = "Time",
                            Color = "#aaaaaa",
                            Size = "sm",
                            Flex= 1
                        },
                        new TextComponent()
                        {
                            Text =  "10:00 - 23:00",
                            Wrap = true,
                            Color = "#666666",
                            Size = "sm",
                            Flex = 5
                        }
                    }
                }
            }
        },
        Footer = new BoxComponent()
        {
            Layout = BoxLayoutType.Vertical,
            Spacing = "sm",
            Contents = new List<IComponent>()
                        {
                            new ButtonComponent()
                            {
                                Style = ButtonStyleType.Link,
                                Height = "sm",
                                Action = new UriAction()
                                {
                                    Label = "CALL",
                                    Uri = "https://linecorp.com"
                                }
                            },
                            new ButtonComponent()
                            {
                                Style = ButtonStyleType.Link,
                                Height = "sm",
                                Action = new UriAction()
                                {
                                    Label = "WEBSITE",
                                    Uri = "https://linecorp.com"
                                }
                            },
                            new BoxComponent()
                            {
                                Layout = BoxLayoutType.Vertical,
                                Contents = new List<IComponent>(),
                                Margin = "sm"
                            }
                        },
            Flex = 0
        },
    },
};

Receipt

using Line.Message;

var request = new FlexMessage()
{
    AltText = "flex receipt test",
    Contents = new Bubble()
    {
        Body = new BoxComponent()
        {
            Layout = BoxLayoutType.Vertical,
            Contents = new List<IComponent>()
            {
                new TextComponent()
                {
                    Text = "RECEIPT",
                    Weight = WeightType.Bold,
                    Color = "#1DB446",
                    Size = "sm"
                },
                new TextComponent()
                {
                    Text = "Brown Store",
                    Weight = WeightType.Bold,
                    Size = "xxl",
                    Margin = "md"
                },
                new TextComponent()
                {
                    Text = "Miraina Tower, 4-1-6 Shinjuku, Tokyo",
                    Size = "xs",
                    Color = "#aaaaaa",
                    Wrap = true
                },
                new SeparatorComponent()
                {
                    Margin = "xxl"
                },
                new BoxComponent()
                {
                    Layout = BoxLayoutType.Vertical,
                    Margin = "xxl",
                    Spacing = "sm",
                    Contents = new List<IComponent>()
                    {
                        new BoxComponent()
                        {
                            Layout = BoxLayoutType.Horizontal,
                            Contents = new List<IComponent>()
                            {
                                new TextComponent()
                                {
                                    Text = "Energy Drink",
                                    Size = "sm",
                                    Color = "#555555",
                                    Flex = 0
                                },
                                new TextComponent()
                                {
                                    Text = "$2.99",
                                    Size = "sm",
                                    Color = "#111111",
                                    Align = HorizontalDirectionType.End
                                }
                            }
                        },
                        new BoxComponent()
                        {
                            Layout = BoxLayoutType.Horizontal,
                            Contents = new List<IComponent>()
                            {
                                new TextComponent()
                                {
                                    Text = "Chewing Gum",
                                    Size = "sm",
                                    Color = "#555555",
                                    Flex = 0
                                },
                                new TextComponent()
                                {
                                    Text = "$0.99",
                                    Size = "sm",
                                    Color = "#111111",
                                    Align = HorizontalDirectionType.End
                                }
                            }
                        },
                        new BoxComponent()
                        {
                            Layout = BoxLayoutType.Horizontal,
                            Contents = new List<IComponent>()
                            {
                                new TextComponent()
                                {
                                    Text = "Bottled Water",
                                    Size = "sm",
                                    Color = "#555555",
                                    Flex = 0
                                },
                                new TextComponent()
                                {
                                    Text = "$3.33",
                                    Size = "sm",
                                    Color = "#111111",
                                    Align = HorizontalDirectionType.End
                                }
                            }
                        },
                        new SeparatorComponent()
                        {
                            Margin = "xxl"
                        },
                        new BoxComponent()
                        {
                            Layout = BoxLayoutType.Horizontal,
                            Margin = "xxl",
                            Contents = new List<IComponent>()
                            {
                                new TextComponent()
                                {
                                    Text = "ITEMS",
                                    Size = "sm",
                                    Color = "#555555"
                                },
                                new TextComponent()
                                {
                                    Text = "3",
                                    Size = "sm",
                                    Color = "#111111",
                                    Align = HorizontalDirectionType.End
                                }
                            }
                        },
                        new BoxComponent()
                        {
                            Layout = BoxLayoutType.Horizontal,
                            Contents = new List<IComponent>()
                            {
                                new TextComponent()
                                {
                                    Text = "TOTAL",
                                    Size = "sm",
                                    Color = "#555555"
                                },
                                new TextComponent()
                                {
                                    Text = "$7.31",
                                    Size = "sm",
                                    Color = "#111111",
                                    Align = HorizontalDirectionType.End
                                }
                            }
                        },
                        new BoxComponent()
                        {
                            Layout = BoxLayoutType.Horizontal,
                            Contents = new List<IComponent>()
                            {
                                new TextComponent()
                                {
                                    Text = "CASH",
                                    Size = "sm",
                                    Color = "#555555"
                                },
                                new TextComponent()
                                {
                                    Text = "$8.0",
                                    Size = "sm",
                                    Color = "#111111",
                                    Align = HorizontalDirectionType.End
                                }
                            }
                        },
                        new BoxComponent()
                        {
                            Layout = BoxLayoutType.Horizontal,
                            Contents = new List<IComponent>()
                            {
                                new TextComponent()
                                {
                                    Text = "CHANGE",
                                    Size = "sm",
                                    Color = "#555555"
                                },
                                new TextComponent()
                                {
                                    Text = "$0.69",
                                    Size = "sm",
                                    Color = "#111111",
                                    Align = HorizontalDirectionType.End
                                }
                            }
                        }
                    }
                },
                new SeparatorComponent()
                {
                    Margin = "xxl"
                },
                new BoxComponent()
                {
                    Layout = BoxLayoutType.Horizontal,
                    Margin = "md",
                    Contents = new List<IComponent>()
                    {
                        new TextComponent()
                        {
                            Text = "PAYMENT ID",
                            Size = "xs",
                            Color = "#aaaaaa",
                            Flex = 0
                        },
                        new TextComponent()
                        {
                            Text = "#743289384279",
                            Color = "#aaaaaa",
                            Size = "xs",
                            Align = HorizontalDirectionType.End
                        }
                    }
                }
            }
        },
        Styles = new BubbleStyle()
        {
            Footer = new BlockStyle()
            {
                Separator = true
            }
        }
    }
};
Clone this wiki locally